本文深入解析Webpack中output.publicPath与devServer.publicPath的配置差异。详细阐述静态资源最终访问路径的计算公式，以及两者不一致时导致的资源加载失败问题。同时结合html-webpack-plugin源码，分析template与filename的路径处理机制，并提供确保开发环境静态资源正常访问的配置建议。
Webpack路径配置概述
在搭建基于Webpack的React项目时，常会遇到output.publicPath与webpack-dev-server中publicPath的配置困惑。由于官方文档对这两者的具体应用描述不够直观，本文通过实际研究梳理其工作机制，并记录相关配置要点。
output
Webpack的output选项用于指定构建输出的目录，其中最核心且常用的配置项包括path和publicPath。
output.path与output.publicPath详解
output.path
默认值： process.cwd()
output.path仅用于指示构建产物的输出目录，它对应一个绝对路径。在实际项目中，通常会进行如下配置：
output: {
path: path.resolve(__dirname, '../dist'),
}
output.publicPath
默认值：空字符串
官方文档对publicPath的解释如下：
Webpack提供了一个关键配置项，允许为项目中的所有资源指定一个基础路径，该路径被称为公共路径（publicPath）。
然而，文档并未详细说明该路径的具体应用方式。
实际上，这里提到的“所有资源的基础路径”是指项目中引用的CSS、JS、图片等资源所依赖的基础URL前缀。该基础路径需与资源自身配置的路径结合使用，因此打包后资源的最终访问路径可通过以下公式计算：
静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
例如：
output.publicPath = '/dist/'
// image
options: {
name: 'img/[name].[ext]?[hash]'
}
// 最终图片的访问路径为
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'
// js output.filename
output: {
filename: '[name].js'
}
// 最终js的访问路径为
output.publicPath + '[name].js' = '/dist/[name].js'
// extract-text-webpack-plugin css
new ExtractTextPlugin({
filename: 'style.[chunkhash].css'
})
// 最终css的访问路径为
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'
在使用html-webpack-plugin打包生成的HTML文件中，可以观察到上述最终静态资源访问路径。当publicPath设置为相对路径时，该相对路径是相对于构建后的index.html而言的。例如，若设置 publicPath: './dist/'，则打包后JS的引用路径变为 ./dist/main.js。但这里存在一个问题：相对路径在本地访问时可行，若将静态资源托管至CDN，则不能使用相对路径；若将publicPath设置为 /，则打包后的访问路径变为 localhost:8080/dist/main.js，导致本地无法直接访问。
因此，在上线时需要手动更改publicPath，这显得不够便捷，且目前尚未找到完美的自动化解决方案。
通常情况下，publicPath应以'/'结尾，而其他loader或插件的配置路径不应以'/'开头，以避免路径拼接错误。
devServer.publicPath配置机制
webpack-dev-server中的publicPath
点击查看官方文档中关于devServer.publicPath的介绍
在开发阶段，我们利用devServer启动开发服务器。此时也需要配置一个publicPath，该路径下的打包文件可在浏览器中直接访问。需要注意的是，静态资源仍遵循output.publicPath的设置。
webpack-dev-server将打包内容存储在内存中，这些打包后资源对外暴露的根目录即为publicPath。换言之，此处设置的是打包后资源在内存中的存放位置。
例如：
// 假设devServer的publicPath为
const publicPath = '/dist/'
// 则启动devServer后index.html的位置为
const htmlPath = `${pablicPath}index.html`
// 包的位置
cosnt mainJsPath = `${pablicPath}main.js`
此时，可以直接通过 http://lcoalhost:8080/dist/main.js 访问到资源。
通过访问 http://localhost:8080/webpack-dev-server 可查看devServer启动后的资源访问路径，如图所示，点击静态资源可以看到静态资源的访问路径为 http://localhost:8080${publicPath}index.html
html-webpack-plugin路径处理与兼容性问题
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环境中，该路径则是相对于webpack-dev-server配置的 publicPath 。
如果webpack-devserver的publicPath与output.publicPath不一致，在使用html-webpack-plugin时可能会导致静态资源引用失败。因为在devServer中，HTML仍通过output.publicPath引用静态资源，这与webpack-devserver提供的资源访问路径不一致，从而导致无法正常访问。
有一种情况除外，就是 output.publicPath 是相对路径，这时候可以访问本地资源
因此，一般情况下都要保证devServer中的 publicPath 与 output.publicPath 保持一致。
最后
相关路径知识补充
关于webpack中的 path 就总结这么多，在研究关于webpack路径的过程中看查到的一些关于路径的零碎的知识如下：
斜杠/的含义
配置中/代表url根路径，例如http://localhost:8080/dist/js/test.js中的http://localhost:8080/
devServer.publicPath & devServer.contentBase
- devServer.contentBase 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
- devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。
node中的路径
- __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
- __filename: 总是返回被执行的 js 的绝对路径
- process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
参考
详解Webpack2的那些路径 webpack 公共路径(Public Path) devServer.publicPath 浅析 NodeJs 的几种文件路径
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。