我们知道 webpack-dev-server 打包的内容是放在内存中，通过express匹配请求路径，然后读取对应的资源输出。这些资源对外的根目录就是publicPath，可以理解为和 outpu.path 的功能一样，将所有资源放在此目录下，在浏览器可以直接访问此目录下的资源。
但是这个路径仅仅只是为了提供浏览器访问打包资源的功能，webpack中的loader和插件仍然是取ouput.publicPath，比如CSS里面的图片最终的路径仍是"/static/img/xxxx.png"，这也是为什么官方推荐 publicPath 和 webpack 配置的保持一致（除了http地址），配置一致才能正常访问其他静态资源。
上面的解释可能还是比较生硬，还是举几个例子来说明：
本例将两处 publicPath 配置成不一样的，这样更容易对比理解。
// webpack.config.js output: { path: path.resolve(`./dist/`), filename: 'js/[name].js', publicPath: '/static/' }
// api 调用 webpack-dev-server var webpack = require('webpack'); var webpackDevServer = require('webpack-dev-server'); var config = require("./webpack.config"); var compiler = webpack(config); var server = new webpackDevServer(compiler, { hot: true, publicPath: 'https://www.jb51.net/web/' }); server.listen(8282, "0.0.0.0")
如何查看 webpack-dev-server 所有启动后的资源访问路径呢？有个简单的方法，就是访问/webpack-dev-server，本例访问截图如下：
上面的资源可以点击查看，你会发现，资源的路径都是/web/*****，所以在index.html中引入JS的路径应为/web/js/main.js，同时也能看到，style.css中的图片路径仍然为/static/img/****.png，而不是/web/。
html-webpack-plugin
这个插件的几处配置受路径配置影响，因此需要专门说明下。
template
template的路径是相对于 output.context，源码如下：
this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);
因此 template 对应的文件需要放在 ouput.context 配置的目录下才能被识别。
filename
filename的路径是相对于 output.path，源码如下：
this.options.filename = path.relative(compiler.options.output.path, filename);
在 webpack-dev-server 中，则相对于 webpack-dev-server 配置的 publicPath。
若 webpack-dev-server 中的 publicPath 和 ouput.publicPath 不一致，在这种配置下使用html-webpack-plugin是有如下问题：
自动引用的路径仍然以 ouput.publicPath 为准，和 webpack-dev-server 提供的资源访问路径不一致，从而不能正常访问；
浏览 index.html 需要加上 webpack-dev-server 配置的 publicPath 才能访问（:8282/web/）。
这两个问题也反推出了最方便的配置为：
ouput.publicPath 和 webpack-dev-server 的publicPath 均配置为'https://www.jb51.net/'，vue-cli 就是这种配置
template 放在根目录，html-webpack-plugin 不用修改参数的路径，filename 采用默认值。
总结
目前就针对上面基础路径做了简单的解释说明，如有错误，请不吝指出，后续若发现其他相关路径配置，再作补充。
好了，以上就是这文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: