By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.
Static vs src/assets in Vue CLI Webpack Templates
As you create a new project using “webpack” template, you will notice two different directories for static assets in the project structure: ‘src/assets’ and ‘static/’. If you aren’t familiar with “webpack” you will be confused. In this short blogpost we’ll be exploring the use cases for them.
If you want to create a Vue project, you should probably start with some foundation, so it is best to use a template (boilerplate, starter, scaffold, and so on). Vue.js documentation on the installation page mentions using the Webpack template for quick scaffolding, so all Vue.js newbies will eventually start using it. Using Webpack is totally fine, because it is the easiest way to get started and allows for the bare necessities of development.
This template supports many progressive features of Webpack and it includes lots of awesome features such as hot reload, provided by vue-loader, CSS extraction, linting and so on. It also has separate configurations for development and production.
After you create a new project using Webpack template with a command:
vue init webpack my-project
You will notice that in the project structure there are two different directories for static assets: ‘src/assets’ and ‘static/’. If you aren’t familiar with Webpack you will certainly get confused. So what are their use cases?
Static
Any static assets placed in the ‘static’ folder will simply be copied to the build folder and won’t go through Webpack. You need to reference them using absolute paths.
Src/assets
In addition to all assets inside the ‘src’ directory, your images, css files and more will be processed here by Webpack.
Let’s see exactly what happens to files when they are processed by Webpack:
All asset URLs such as <img src=”…”>, background: url(…) and CSS @import are resolved by Webpack as module dependencies like require(‘./logo.png’).
We then use loaders for Webpack, such as file-loader and url-loader, to process them. Webpack template has already configured these loaders.
File-loader helps to determine the final file location and how to name it using version hashes for better caching. Thus you can put your static assets near your .vue files and use relative paths. There is no need to put them strictly into the ‘assets’ folder.
Url-loader helps to conditionally inline assets such as base64 data URL, reducing the amount of HTTP requests.
So what the hell should I do with it?
The answer is: put your assets in the ‘src’ folder.
Why?
Because by processing files with webpack :
- Small images are converted to data URL in base64 to avoid extra network requests.
- Result filenames include hashes, and this way we will have the same URL as long as the content is the same. Therefore, you don’t need to worry about browsers caching their old versions.
By using static, you lose the automatic hash generated by webpack so it’s difficult to change a file URL. A logical question that may follow is then: Why does the static folder even exist?
In my small vuejs exploration, I haven’t seen any examples of using the folder “static”. So let’s just see what the vue-cli documentation says:
When to use the static folder?
- You need a file with a specific name in the build output.
- You have thousands of images and need to dynamically reference their paths.
- Some libraries may be incompatible with Webpack and you have no other option but to include it as a <script> tag.
The only thing left is to understand how resolving rules in Webpack works and how to properly set up a Webpack configuration file.
We hope that through reading about our experience in this area you’ll now feel that much more confident, but if you happen to need any assistance in Vue.js development, feel free to contact us!
Resources:
https://vuejs.org/v2/guide/installation.html http://vuejs-templates.github.io/webpack/
https://github.com/3rd-Eden/fingerprinting