[SOLVED] Removing webpack from CLI template (f7+vue+cordova)

Hello,
I am creating an SPA which should run on mobile devices too, so i used the F7 CLI to generate a F7+Vue+Cordova app template.
It comes with other things preinstalled and preconfigured (webpack, babel, ecc).
Since some of those things (webpack in particular) have a pretty steep learning curve, for now i’d like to avoid them unless extremely necessary.
So my question is: Is there a way to exclude webpack from the template, without breaking it all?
Is webpack really necessary in this template to make cordova work, or would it better to just create a project without the CLI, and then “compile” the project with cordova when needed?

thank you very much

How are you going to use Vue (compile Vue components) without webpack?

Sorry, didn’t think of that. Actually i didn’t even know about it…
I am used to using the framework7.bundle.min.js file by just inserting the script tag.
Is there a way to just use vue+f7+cordova without anything else? i’m asking because i am familiar (more or less) with these 3, but i am way less familiar with all these additional tools (node/npm, webpack, babel, ecc).
or, can you point me to some guide/description about the CLI template? i looked at some basic guide for webpack & his friends, but your setup (webpack.config.js) seems to be way more advanced and complex, so i have troubles understanding it.

thank you again for your time

Not really, Vue.js can’t be used without template compiler. Actually it can with compiler on front-end/client side, but it is highly not recommended for production as it can be very slow.

Well, i don’t understand what do you worry about? The webpack + babel + postcss setup is done in the way where you in 99% shouldn’t touch anything. There are, in addion, some npm scripts also already prepared and described in readme.md file.

Better, if you will want something to change in webpack/babel setup, just ask here on forum, and we will help you

hi,
my wish to remove webpack originated because i couldn’t get images to work. Let me explain.
I created a folder called images inside the src folder. I then put an <img> tag inside my template, but i wasn’t able to get the image via src attribute. I tried with

  • <img src="./images/logo.png">
  • <img src="../images/logo.png"> (since the template was in the src/scripts folder)
  • <img src="/images/logo.png">

None of them worked. I then tried to comprehend the content of the webpack config file, and i understood that there’s a “loader” that fiddles with the http requests somehow. I couldn’t arrive to any useful conclusion, and i lost too many hours trying to figure out all of this mess… That’s the reason why i was determined to removed it.

I am willing to keep it now, so my question is:
How do i get my <imgs> to work ?
in the readme there’s only the “assets” section which seems to be about the splashscreen/cordova icons, but not about normal images…

Create src/static/images folder

1 Like

In Vue+Webpack, image assets are loaded/included automatically. To reference images it is required to use images path relative to path of current vue component:

src
  images
    hello.png
  pages
    hello.vue

Then in hello.vue it will be <img src="../images/hello.png">

1 Like

And in webpack if you need to use some image or asset path, it can be retrieved with require

var helloUrl = require(’…/images/hello.png’); // will return required image path string

Hi, thanks the reply, it worked… i tried it with a relative path before, but i think i used a path relative to the index.html instead of the component. I’m not sure. Anyway it works now.

Thanks for the suggestion!
I’ll place my images there

Yes, webpack is smart enough. So when working with it, you need to specifiy paths relatively to file you are working with, including JS, CSS and HTML files.

Thanks.
If in the future i have some other question about webpack, i’ll create another topic.
You can mark as solved.

edit: oh i’ve just seen it’s already solved, nvm