Recently, WHEN I was building a React project based on Webpack, I encountered problems about output.publicPath and publicPath in webpack-dev-server. However, their descriptions in official documents were not very clear, so I studied them and wrote down records in this paper.

output

The Output option specifies the location of the Webpack output, of which the more important and frequently used ones are Path and publicPath

output.path

  • Default value:process.cwd()

Output. path simply indicates the output directory, corresponding to an absolute path, for example in a project is usually configured as follows:

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

output.publicPath

  • Default: empty string

The official documentation explains publicPath

Webpack provides a very useful configuration that helps you specify a base path for all resources in your project, which is called a publicPath.

And it’s not clear how to apply that path…

In fact, the basic path of all resources mentioned here refers to a basic path when CSS, JS, img and other resources are referenced in the project. This basic path should be used in conjunction with the path specified in the specific resource. Therefore, the access path of packaged resources can be expressed as follows:

Static resource access path = output.publicPath + Resource loader or plug-in configuration pathCopy the code

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 js access path is
output.publicPath + '[name].js' = '/dist/[name].js'

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

This final static resource access path can be seen in the RESULTING HTML packaged using the HTml-webpack-plugin. So when publicPath is set to relative, the relative path is relative to the index. HTML after build. For example, if publicPath is set to: /dist/main.js, but there is a problem, relative path can be used for local access, but if static resources are hosted on the CDN, the access path can not use relative path, but if publicPath is set to /, After packaging access path for localhost: 8080 / dist/main. Js, local cannot be accessed

So you need to manually change the publicPath when you go online. It’s not very convenient, but I don’t know how to do it.

Generally, publicPath should end with a ‘/’. Other Loaders or plug-ins should not start with a ‘/’

The publicPath webpack — dev server

Check out the official documentation for devServer.publicPath

In the development phase, we use devServer to start a development server for development, which will also be configured with a publicPath, where the publicPath package file can be accessed in the browser. Static resources still use output.publicPath.

Webpack-dev-server packages are stored in memory, and the external root directory of these packaged resources is publicPath. In other words, we set the location of the packaged resources

Such as:

// Assume that devServer's publicPath is
const publicPath = '/dist/'
// Then the index. HTML position after devServer is started is
const htmlPath = `${pablicPath}index.html`
// The location of the package
cosnt mainJsPath = `${pablicPath}main.js`
Copy the code

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

By visiting http://localhost:8080/webpack-dev-server can get access to resources after devServer started path, as shown in figure, Click the static resource and you can see that the static resource access path 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 are affected by the path, as you can see from the source

template

Purpose: Defines the path to a template file

Source:

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

Therefore, template will only be recognized if defined in the webpack context, which defaults to process.cwd(), the absolute path to the folder in which the Node command is run

filename

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

Source:

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

So the path of filename is relative to phioutput.pathIn webpack-dev-server, is configured relative to webpack-dev-serverpublicPath.

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.

The only exception is when output.publicPath is a relative path and local resources can be accessed

So in general, you want to keep devServerpublicPathwithoutput.publicPathBe consistent.

The last

So much for the summary of path in Webpack. In the process of studying the path in Webpack, I saw some bits and pieces of knowledge about path as follows:

slash/The meaning of

Configuration/on behalf of the url in the root directory, such as the http://localhost:8080/ http://localhost:8080/dist/js/test.js

devServer.publicPath & devServer.contentBase

  • Devserver.contentbase tells the server where to provide content. Only if you want to provide static files.
  • Devserver. publicPath will be used to determine where bundles should be provided from, and this option takes precedence.

Path in node

  • __dirnameAlways return the absolute path to the folder where the JS is being executed
  • __filenameAlways return the absolute path of the js being executed
  • process.cwd(): Always returns the absolute path to the folder where the node command was run

reference

  • Explain the paths to Webpack2
  • Webpack Public Path
  • devServer.publicPath
  • NodeJs file paths
  • Questions about relative and absolute paths in the project