前言
最近在写一个 Webpack + React 的 Demo，关于涉及路径参数配置很容易混淆，所以写这篇文章整理一下。
*以下关于 webpack-dev-server 会简写成 dev-server 或者 devServer。
总结：
output.path表示 output 目录对应的一个绝对路径。output.publicPath表示打包生成的 index.html 文件里面引用资源的前缀。devServer.publicPath表示打包生成的静态文件所在的位置，若devServer.publicPath没有设置，则会取output.publicPath的值。devServer.contentBase表示服务器从哪里提供内容。一般只有在提供静态文件时才需要。
正文
基本配置
写一个简单的项目，没有过多的东西，足以说明本文的几个配置项即可，目录结构如下：
my-project src index.css // 仅设置了一个背景图片 index.html // 简单的一个 HTML 作为模板而已，随意写个 div 标签啥的就 OK 了 index.js // 仅引用了 index.css package.json webpack.config.js
项目里面 index.js、index.css、index.html 里面其实没什么内容的，就如上面备注一样而已。
// package.json { "scripts": { "build": "webpack", "dev": "webpack-dev-server" } }
// webpack.config.js const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, devServer: { open: true }, plugins: [ new HtmlWebpackPlugin({ title: 'webpack demo', template: './src/index.html', filename: 'index.html', inject: true, hash: false }), new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'style.css' }) ], module: { rules: [ { test: /\.css$/, exclude: /node_modules/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /\.(png|jpg|gif)$/, loader: 'file-loader', options: { name: '[name].[ext]' } } ] } }
1. output.path
- 默认值：
path.join(process.cwd(), 'dist')
指定输出文件的目标路径。它是一个绝对路径，默认是项目根目录下的 dist 路径。项目中经常会看到如下配置：
output: { path: path.resolve(__dirname, 'dist') }
简单地说，就是运行 yarn run build 命令，webpack 将项目打包之后的文件（如 index.html、bundle.js、图片等）输出到该目录。这个还是比较好理解的。
2. output.publicPath
- 默认值：
''（空字符串）
output.publicPath 常用于在生产环境。它会为所有的资源指定一个基础路径，它被称为公共路径。
如何理解？
这里所说的所有资源的基础路径是指项目中引用 CSS、JS、Image 等资源时候的一个基础路径。这个基础路径要配合具体资源中指定的路径使用，所以打包后的资源的访问可以用如下公式表示：
静态资源最终访问路径 = output.publicPath + 资源 loader 或插件等配置路径
这个最终静态资源访问路径在使用 html-webpack-plugin 打包后得到的 html 中可以看到。如果
output.publicPath设置成相对路径后，相对路径是相应地打包后的 html 的。假设
output.publicPath设置成了'./dist/'，那么打包后的 JS 引用路径为./dist/main.js。这里会存在一个问题，相对路径在本地能正常访问到。但是如果把静态资源托管到 CDN 上，访问路径显然不能使用相对路径的。如果设置成'/dist/'，则打包后的访问路径是localhost:8080/dist/main.js，此时本地无法访问。一般解决方法就是利用webpack.DefinePlugin来定义一个全局变量（process.env.NODE_ENV）区分开发、生产环境来设定不同的值，或者是采用两份不同的配置文件来进行打包。一般来说，
output.publicPath应该以'/'结尾，而其他 loader 或插件的配置不要以'/'开头。
案例：
output.publicPath = '/dist/' // 案例一（image file-loader） options: { name: 'img/[name].[ext]' } // 最终路径：output.publicPath + 'img/[name].[ext]' = '/dist/img/[name].[ext]' // 案例二（js output.filename） output: { filename: '[name].js' } // 最终路径：output.publicPath + '[name].js' = '/dist/[name].js' // 案例三（extract-text-webpack-plugin css） new ExtractTextPlugin({ filename: 'style.[chunkhash].css' }) // 最终路径：output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'
我们修改一下 output.publicPath 配置，如下：
// webpack.config.js const path = require('path') module.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/outputDir/' } }
运行 yarn run dev 命令，可以看到命令行显示如下信息：
ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from /outputDir/
然后，访问 http://localhost:8080/ 结果如下：
访问 http://localhost:8080/outputDir/ 结果如下：
根据上面两张图可以看出，设置
output.publicPath后，如果devServer.publicPath没有设置，那么使用 webpack-dev-server 进行打包时生成的静态文件所在的位置以及 index.html 文件里面引用资源的前缀都是output.publicPath里面设置的值。
3. devServer.publicPath
- 默认值：
'/'
插句话，斜杠
/的含义表示 URL 的根路径，例如http://localhost:8080/dist/main.js中的http://localhost:8080/。
在开发过程中，我们借用 webpack-dev-server 启动一个开发服务器，我们一般也会配置一个 devServer.publicPath，这里的 devServer.publicPath 路径下的打包文件可以在浏览器中访问。而静态资源仍然使用 output.publicPath。
webpack-dev-server 打包的内容是放在内存中的，这些打包后的资源对外的根目录就是 devServer.publicPath，换句话说，这里我们设置的是打包后资源存放的位置。
假设 devServer.publicPath = '/dist/' 那么，启动 webpack-dev-server 后 index.html 路径为 publicPath + index.html 那么，启动 webpack-dev-server 后 main.js 路径为 publicPath + main.js
以上这些，通过访问 http://localhost:8080/webpack-dev-server 可以看到启动后的资源访问路径。点击里面的静态资源文件可以看到路径为 http://localhost:8080${publicPath}index.html。
接着，我们修改一下 devServer.publicPath 的配置，如下：
// webpack.config.js module.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/outputDir/' }, devServer: { publicPath: '/assets/' open: true } }
执行 yarn run dev 命令 ，命令行显示如下信息（我们看到跟此前不一样了）：
ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from /assets/
然后，访问 http://localhost:8080/ 结果如下：
访问 http://localhost:8080/assets/ 结果如下：
我们发现 JS 和 CSS 文件的引用路径还是没变，但是我们发现页面的背景图片没有了，因为它报错了，CSS 和 JS 都找不到，如下：
可以看出，
devServer.publicPath表示打包生成的静态文件所在的位置。并且它的优先级是最高的。而output.publicPath表示 index.html 文件里面引用资源的前缀。
4. devServer.contentBase
- 默认值：
process.cwd()（即当前工作目录）
只有在你想要提供静态文件时才需要。
接着，添加 devServer.contentBase 配置，如下：
// webpack.config.js module.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/outputDir/' }, devServer: { contentBase: './aaa', publicPath: '/assets/', open: true } }
执行 yarn run dev 命令，命令行显示信息如下：
ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from /assets/ ℹ ｢wds｣: Content not from webpack is served from ./aaa
可以发现有一条是：Content not from webpack is served from ./aaa，可以看出 devServer.contentBase 指的是，不由 webpack 打包生成的静态文件。
访问 http://localhost:8080/ 结果如下：
因为 http://localhost:8080/ 下并没有 aaa 目录，所以根本找不到。而前面没有设置 devServer.contentBase 的时候，会使用 contentBase 的默认值（当前执行的目录，即项目根目录）。在访问 http://localhost:8080/ 时，由于在根目录下没有找到 index.html 文件，因此会显示根目录下的资源文件。
访问 http://localhost:8080/assets/，结果如下：
可见，
devServer.contentBase与打包生成的静态文件所在的位置和 index.html 里面引用资源的前缀是没有影响的。
接着，我们再修改一下 devServer.contentBase 的配置，将其设置为 src 目录，而该目录下是有我们编写的 index.html 模板文件的。
// webpack.config.js module.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/outputDir/' }, devServer: { contentBase: './src', publicPath: '/assets/', open: true } }
访问 http://localhost:8080/，结果如下：
可以看出，访问的是我们本地编写的 index.html 文件。请注意，这个不是 webpack 打包生成的 index.html 文件。
5. html-webpack-plugin
这个插件用于将 CSS 和 JS 添加到 HTML 模板中，其中 template 和 filename 会受到路径的影响。
template
作用是用于定义模板文件的路径。
// 源码 this.options.template = this.getFullTemplatePath(this.options.template, compiler.context)
因此，template 只有定义在 webpack 的 context 才会被识别，webpack 的 context 默认值为 process.cwd()，即运行 node 命令时所在的文件夹的绝对路径。
filename
作用是输出的 HTML 文件名，默认为 index.html，可以直接配置带有子目录。
// 源码 this.options.filename = path.relative(compiler.options.output.path, filename)
所以 filename 的路径是相当于 output.path 的，而在 webpack-dev-server 中，则是相当于 devServer.publicPath 的。
如果 devServer.publicPath 和 output.publicPath 不一致，在使用 html-webpack-plugin 可能会导致引用静态资源失败，因为在 devServer 中仍然以 output.publicPath 引用静态资源的，当跟 webpack-dev-server 的提供的资源访问路径不一致，从而无法正常访问。
有一种情况除外，就是
output.publicPath是相对路径，这时候可以访问本地资源。
所以一般情况下，都要保证 devServer.publicPath 与 output.publicPath 保持一致。
