Detailed explanation of publicPath usage in Webpack

Recently, I was building a react project based on webpack, and encountered problems with output.publicPath and publicPath in webpack-dev-server. The official documentation did not describe them very clearly, so I studied it myself and wrote this article to record it.

output

The output option specifies the location of webpack output. The more important and frequently used ones are path and publicPath

output.path

Default value: process.cwd()
output.path just indicates the output directory, corresponding to an absolute path. For example, the following configuration is usually done in the project:

output: {
 path: path.resolve(__dirname, '../dist'),
}

output.publicPath

Default value: empty string The official documentation explains publicPath as

webpack provides a very useful configuration that helps you specify a base path for all assets in your project. It is called the publicPath.

It is not clear how to apply this path...

In fact, the basic path of all resources mentioned here refers to the basic path when referencing css, js, img and other resources in the project. This basic path should be used in conjunction with the path specified in the specific resources, so the access path of the packaged resources can be expressed by the following formula:

The final access path of static resources = output.publicPath + resource loader or plug-in configuration path

For example

output.publicPath = '/dist/'

//image
options:
  name: 'img/[name].[ext]?[hash]'
}

// The final image access path is output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

//js output.filename
output: {
 filename: '[name].js'
}
// The final access path of js is output.publicPath + '[name].js' = '/dist/[name].js'

// extract-text-webpack-plugin css
new ExtractTextPlugin({
 filename: 'style.[chunkhash].css'
})
// The final access path of CSS is output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

This final static resource access path can be seen in the HTML obtained after packaging with html-webpack-plugin. So after publicPath is set to a relative path, the relative path is relative to the index.html after build. For example, if publicPath is set to './dist/', the reference path of the packaged js is ./dist/main.js. But there is a problem here. The relative path can be used when accessing locally, but if the static resources are hosted on CDN, the access path obviously cannot use a relative path. However, if publicPath is set to /, the access path after packaging is localhost:8080/dist/main.js, which cannot be accessed locally.

So here you need to manually change the publicPath when going online, which is not very convenient, but I don't know how to solve it...

Generally, publicPath should end with '/', and other loader or plugin configurations should not start with '/'

publicPath in webpack-dev-server

Click to view the introduction of devServer.publicPath in the official documentation

During the development phase, we use devServer to start a development server for development. A publicPath will also be configured here. The packaged files under the publicPath path can be accessed in the browser. Static resources still use output.publicPath.

The contents packaged by webpack-dev-server are stored in memory. The root directory of these packaged resources is publicPath. In other words, here we set the location where the packaged resources are stored.

For example:

// Assume that the publicPath of devServer is const publicPath = '/dist/'
// After starting devServer, the location of index.html is const htmlPath = `${pablicPath}index.html`
// Package location cosnt mainJsPath = `${pablicPath}main.js`

The above can be accessed directly through http://lcoalhost:8080/dist/main.js.

By visiting http://localhost:8080/webpack-dev-server, you can get the resource access path after devServer is started. As shown in the figure, click Static Resources to see that the access path of static resources is http://localhost:8080${publicPath}index.html

html-webpack-plugin

This plugin is used to add css and js to the html template, where template and filename will be affected by the path, as can be seen from the source code

template

Function: used to define the path of the template file

Source code:

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

Therefore, template will only be recognized if it is defined in the webpack context. The default value of the webpack context is process.cwd(), which is the absolute path of the folder where the node command is run.

filename

Function: Output HTML file name, default is index.html, can be directly configured with subdirectories

Source code:

this.options.filename = path.relative(compiler.options.output.path, filename);

So the path of filename is relative to output.path, and in webpack-dev-server, it is relative to the publicPath configured by webpack-dev-server.

If the publicPath of webpack-dev-server is inconsistent with output.publicPath, the use of html-webpack-plugin may cause failure to reference static resources, because the static resources are still referenced by output.publicPath in devServer, which is inconsistent with the resource access path provided by webpack-dev-server, and thus cannot be accessed normally.

There is one exception, that is, output.publicPath is a relative path, then you can access local resources

Therefore, in general, it is necessary to ensure that the publicPath in devServer is consistent with output.publicPath.

at last

That's all about the path in webpack. In the process of studying the path of webpack, I found some fragmentary knowledge about the path as follows:

The meaning of slash /

In the configuration, / represents the root path of the URL, such as http://localhost:8080/ in http://localhost:8080/dist/js/test.js

devServer.publicPath & devServer.contentBase

• devServer.contentBase tells the server where to serve content from. Only needed if you want to serve static files.
• devServer.publicPath will be used to determine where the bundle should be served from, and this option takes precedence.

Path in node

• __dirname: always returns the absolute path of the folder where the executed js is located
• __filename: always returns the absolute path of the executed js
• process.cwd(): always returns the absolute path of the folder where the node command is run
  

refer to

Detailed explanation of the paths of Webpack2

A brief analysis of several file paths in NodeJs

Problems with relative and absolute paths in projects

This is the end of this article about the detailed use of publicPath in Webpack. For more relevant Webpack publicPath content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!