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?
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.
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…
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">
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.
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.