Detailed explanation of how vue-cli and webpack process static resources and the steps for using webpack packaging

This time I will bring you a detailed explanation of how vue-cli and webpack process static resources and the steps for using webpack packaging. What are the methods for vue-cli and webpack to process static resources and what are the precautions for using webpack packaging. The following is Let’s take a look at practical cases.

The pitfalls of webpack packaging through Vue-cli

The scaffolding built by Vue-cli for the Vue project is indeed very convenient, but packaging is easy A blank page appears, or the corresponding static resource cannot be loaded.

I solved it by changing the assetsPublicPath of index.js under project/config to './' and turning it into a relative path.

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

Processing static resources

You may notice that in projects that combine vue-cli with webpack, we usually have two static resources Resource paths: src/assets and static/, what is the difference between them? This article mainly introduces how vue-cli and webpack are combined to handle static resources. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Packaged resources

In order to answer this question, we must first understand how Webpack handles static resources. In the *.vue component, all templates and CSS modules are parsed by vue-html-loader and css-loader to find the path URL.

For example, in <img src alt="Detailed explanation of how vue-cli and webpack process static resources and the steps for using webpack packaging" > and backgroundbackground: url(./logo.png)," ./logo.png" is a relative path and will be loaded as a dependency by Webpack.

But because logo.png is not JavaScript, if it is regarded as a dependent flower, we need to parse it through url-loader and file-loader. This template has already configured the corresponding loader for you, so you usually don't have to worry about relative path deployment issues.

Even though these resources may be inlined/copied/renamed during the build process, they are still an important part of the source code. This is why we recommend placing static resources in a separate /src folder, like other resource folders.

In fact, you don’t have to put them all in /src/assets, you can organize and utilize them according to modules/components. For example, you can put any components into their own directory and store static resources in that directory.

Resource introduction rules

Relative paths, such as ./assets/logo.png will be parsed into module dependencies. They will be replaced by an automatically generated URL based on your Webpack output configuration.

A path without a prefix, such as assets/logo.png, is the same as a relative path and is escaped to ./assets/logo.png

A path with a ~ prefix. ~ is considered a module request, the same as require('some-module/image.png'). Root path, such as /assets/log.png

Get the resource path in JavaScript

computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}

This resource path will also be processed by file-loader Then return the processed path. And Webpack will load all the images in the bgs directory at once.

"Real" static resources

In contrast, none of the files in static/ will be processed by Webpack. They will be copied directly to the target folder, and absolute paths must be used to reference these files.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate vue input input verification alphanumeric combination and the length is less than 30

How to operate Vue Make Amap and build a real-time bus application

The above is the detailed content of Detailed explanation of how vue-cli and webpack process static resources and the steps for using webpack packaging. For more information, please follow other related articles on the PHP Chinese website!