Detailed explanation of the advantages and disadvantages of using Webpack path and publicPath

This time I will bring you a detailed explanation of the advantages and disadvantages of using Webpack path and publicPath. What are the precautions when using Webpack path and publicPath? Here are practical cases, let’s take a look.

Preface

During the development process of webpackModularization, I discovered the webpack.config.js configuration The output path of file always has a path and publicPath, but I don’t understand its meaning.

module.exports = {
 output: {
 path: path.resolve("./examples/dist"),
 filename: "app.js",
 publicPath: "What should I put here?" 
 } 
}

Text

Official explanation

publicPath: The output.path from the view of the Javascript / HTML page.

The output path from the JS/HTML page

My understanding

output.path stores all your output The local file directory for the file. (Absolute path)

For example:

path.join(dirname, “build/”)

webpack will output all files to localdisk/path-to-your-project/build/

output. publicPath

YouUploadThe location of all packaged files (relative to the server root directory)

path: the output directory used to store packaged files

publicPath: Specify the directory referenced by the resource file

Use: For example, in express, public/dist is specified as the root directory of the website, and the source files of the website are stored in public, then you need to set path:”./ dist" specifies the package output to this directory, and publicPath needs to be set to "/", indicating the current path.

publicPath depends on the location of the root directory of your website, because the packaged files are all in the root directory of the website, and the references to these files are based on this directory. Assume that the root directory of the website is public and the referenced image path is './img.png'. If the publicPath is '/', the image cannot be displayed because the images are packaged in dist, then you need to set the publicPath to " /dist".

For example:

/assets/

Suppose you deploy this project on the server http://server/

by changing output.publicPath Set to /assets/, this project will find webpack resources at http://server/assets/.

Under this premise, all paths related to webpack will be rewritten to start with /assets/.

src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)

Important

If you are using style-loader or css sourceMap, you need to set publicPath. Set it to the absolute path of the server address, such as http://server/assets/, so that the resources can be loaded correctly.

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:

Vue form class parent-child component data transfer data method summary

angular routerlink jump method summary

The above is the detailed content of Detailed explanation of the advantages and disadvantages of using Webpack path and publicPath. For more information, please follow other related articles on the PHP Chinese website!