When researching Webpack packaging, publicPath has always been a big puzzle. Today I’m going to document the process of my clarification.

First, webpack-dev-server can also be packaged. It is used to package files in the development environment and run the packaged files on the local server (localhost.xx.xx.8080). When packaged in the production environment, it is packaged with webpack. The packaged files run online on the server (test.xx.com).

The publicPath in webpack-dev-server is a path on the local server, and the publicPath in output is a path on the online server. That’s the essential difference.

Next, let’s discuss it in detail:

1) What is the function of publicPath in output?

output: {
    filename: "bundle.[hash].js".path: path.resolve(__dirname, "dist")
    publicPath: "/assets/",},Copy the code

The publicPath in output is not normally used,Only needed in a production environmentBefore going online, you need to uniformly configure resource prefixes for static resources in the project to represent the addresses of online resources accessed by clients. PublicPath is a publicPath, which provides a basic path for the static resources of the entire project. Static resources include: js, CSS, img, etc. After packaging, the storage path of static resources is no longer the root path. Instead, a new assets folder is created in the root directory to store the packaged resources of the project. Open HTML to see source:

We can see that the js file introduced in script has the prefix of assets. When the browser finds the HTML file, it will load other static resource files (JS IMG CSS) in the HTML file and search for them according to the set file path.

2) What is the publicPath function in devServer? Modify webpack.config.js as follows:

devServer: {
      // Dist is the base directory
      contentBase: path.join(__dirname, "dist"),
      // Automatically compress code
      compress: true.// The service port is 1208
      port: 1208.// Automatically open the browser
      open: true.host: "dev.jd.com".publicPath: "/assets/",},Copy the code

Repackage and NPM start, this time we see dev.jd.com:1208/ page is blank, there is no content, when we add the suffix dev.jd.com:1208/assets/, we can see the content of the page. This indicates that the server has stored the packaged files in assets folder.

This can also be seen in source, as shown below:3) Why is it best to keep the two publicPaths the same? So let’s change these two to different ones and see what happens?

output: {
      filename: "bundle.[hash].js".path: path.resolve(__dirname, "dist"),
      publicPath: "/test/",},devServer: {
      // Dist is the base directory
      contentBase: path.join(__dirname, "dist"),
      // Automatically compress code
      compress: true.// The service port is 1208
      port: 1208.// Automatically open the browser
      open: true.host: "dev.jd.com".publicPath: "/assets/",},Copy the code

Repackage and run:Look at the figure above, visitdev.jd.com:1208/assets/, you can find the HTML file, but in the HTML file js file 404 error, it can illustrate this, devserver is where the local code for packing, it wants to simulate address access to online resources, but the static resource storage address do not match the address and store it, so I can’t access to resources would happen.

Excerpt a paragraph, very concise explanation of this sentence:

Reference: juejin. Cn/post / 684490…

If the publicPath of webpack-dev-server is inconsistent with output.publicPath, the html-webpack-plugin may fail to reference static resources. Because static resources in devServer are still referred to as output.publicPath, the access path provided by webpack-dev-server is inconsistent with that provided by webpack-dev-server.

That’s why the website allows us to keep the two in line.