Detailed explanation of how vue-cli and webpack process static resources and the steps for using webpack packaging-JS Tutorial-php.cn

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打包

Copy after login

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, inand 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 asrequire('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') } }

Copy after login

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!