如果webpack-dev-server的 publicPath 和 output.publicPath 不一致,在使用html-webpack-plugin可能会导致引用静态资源失败,因为在devServer中仍然以 output.publicPath 引用静态资源,和webpack-dev-server的提供的资源访问路径不一致,从而无法正常访问。
有一种情况除外,就是 output.publicPath 是相对路径,这时候可以访问本地资源
所以一般情况下都要保证devServer中的 publicPath 与 output.publicPath 保持一致。
最后
关于webpack中的 path 就总结这么多,在研究关于webpack路径的过程中看查到的一些关于路径的零碎的知识如下:
斜杠/的含义
配置中/代表url根路径,例如:8080/dist/js/test.js中的:8080/
devServer.publicPath & devServer.contentBase
devServer.contentBase 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
devServer.publicPath 将用于确定应该从哪里提供 bundle,并且此选项优先。
node中的路径
__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
__filename: 总是返回被执行的 js 的绝对路径
process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
参考