总结：

• output.path: 非webpack-dev-server模式下（build模式），html、css、js文件真实输出的路径
• output.publicPath: 不管是dev还是build模式，都是资源引用的根路径，相对于index.html所在位置，增加这个路径前缀。例如原来是’style/a.css’，编译后为’/static/style/a.css’

output.publicPath是总体设置css、js、jpg等资源的引用，也可以在资源各自的loader中设置，具体见文档。

• webpack-dev-server的publicPath：dev模式下，html、css、js文件输出的路径，默认是http://localhost:8282/web/，多了一个web
• publicPath文件的引用路径，主要还是看最终是怎么部署的。

最方便的配置为：

• ouput.publicPath 和 webpack-dev-server 的publicPath 均配置为**‘/‘，vue-cli 就是这种配置**
• template 放在根目录，html-webpack-plugin 不用修改参数的路径，filename 采用默认值（上一条设置的/）

**

注意CSS背景图

如果css文件中开发src下引用的是相对路径，例如

.bgimg {
    background: url('../images/cd_bank.png') no-repeat 20% top / contain;
}

这里相对路径../是在src源文件中的引用路径，
在build之后，是相对于index.html的，../images/cd…由于找不到上一级，所以就直接是imges/cd…，因此要给publicPath设为../使最终的路径也是../images/cd_bank.png（前提是css和images文件夹同级）。

• 所以这种目录配置方式就不太科学

ouput.publicPath

**静态资源最终访问路径** = **output.publicPath** + **资源loader或插件等配置路径**

• publicPath 默认值为空字符串
• publicPath应该以’/‘结尾，其他loader或插件的配置不要以’/‘开头

1. 相对路径

相对路径实际上是相对于index.html的路径

1. 相对于协议url（//）或http地址（http://）

比如publicPath:’http://wwww.qinshenxue.com/static/'，开发环境当然是不能这么干，使用这个的场景是将资源托管 到CDN，比如公司的静态资源服务器等。

webpack-dev-server的publicPath

index.html和资源都被放到了这个设置的publicPath中
可以理解为和 output.path功能一样，这个路径仅仅只是为了提供浏览器访问打包资源的功能——文件被打包输出的地方
webpack中的loader和插件仍然是取ouput.publicPath —— 引用的路径
因此，官方推荐webpack-dev-server的publicPath 和 webpack （output.publicPath）配置的保持一致（除了http地址）

// 假设devServer的publicPath为
const publicPath = '/dist/'
// 则启动devServer后index.html的位置为
const htmlPath = `${pablicPath}index.html`
// 包的位置
const mainJsPath = `${pablicPath}main.js`

html-webpack-plugin

template，源html文件的路径

template的路径是相对于 output.context
默认值为process.cwd()，既运行 node 命令时所在的文件夹的绝对路径（package.json）

filename，html输出的路径

• build模式：filename的路径是相对于 output.path

• 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 才能访问（http://localhost:8282/web/）

  这两个问题也反推出了最方便的配置为：

• ouput.publicPath 和 webpack-dev-server 的publicPath 均配置为**‘/‘，vue-cli 就是这种配置**

• template 放在根目录，html-webpack-plugin 不用修改参数的路径，filename 采用默认值（上一条设置的/）

index.html => /index.html
style.css => /style.css