The difference between Webpack path and publicPath uses parsing

This time I will bring you an analysis of the difference between Webpack path and publicPath. What are the precautions about the difference between 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)

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:

Using JS to determine the content contained in a string Summary of methods

JS HTML5 real binding mouse event Particle animation

The above is the detailed content of The difference between Webpack path and publicPath uses parsing. For more information, please follow other related articles on the PHP Chinese website!