How vue-cli and webpack handle static resources

Processing static resources

You may notice that in projects that combine vue-cli with webpack, we usually have two static 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 25cfe0985ac8bf7309a5313998e00a48 and background: url(./logo.png), "./logo.png" is a relative path, which will 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 and then returned to processing path after. 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.

Related recommendations:

Examples of how thinkphp5 loads static resource paths and constants

JavaScript tutorial processing of static resource file requests Method

10 recommended articles about static resources

The above is the detailed content of How vue-cli and webpack handle static resources. For more information, please follow other related articles on the PHP Chinese website!