Webpack中publicPath路径问题详解

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

output.publicPath = '/dist/'

// image
options: {
 name: 'img/[name].[ext]"_blank" href="https://doc.webpack-china.org/configuration/dev-server/#devserver-publicpath-" rel="external nofollow" rel="external nofollow" >点击查看官方文档中关于devServer.publicPath的介绍

在开发阶段，我们借用devServer启动一个开发服务器进行开发，这里也会配置一个 publicPath ，这里的 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
这个插件用于将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-dev-server的 publicPath 和 output.publicPath 不一致，在使用html-webpack-plugin可能会导致引用静态资源失败，因为在devServer中仍然以 output.publicPath 引用静态资源，和webpack-dev-server的提供的资源访问路径不一致，从而无法正常访问。
有一种情况除外，就是 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 的几种文件路径


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。