-
output 中的 path 和 publicPath
- path: 项目打包所存放到的路径，此路径中包含项目所有文件和目录。应该是一个绝对路径。
- publicPath: 静态文件打包存放的目录。静态文件是指 img 的src ,link ，script 标签等所指向的文件。publicPath 是相对于path 所在的路径。是一个相对路径。
publicPath大白话：
- 对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。
- 此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面（或 <base> 标签）解析。
- publicPath是用于引导静态资源(js,css,img)，比如在页面引入了background-image:url(’/static/people.png’); 这时候这里的路径就会相对publicPath做调整；指的是将来这些静态资源将会放到哪，由线上静态资源存放的路径决定的
publicPath取决于根目录path的位置，因为打包的文件都在path目录了，这些文件的引用都是基于该目录的。假设path为public，引用的图片路径是'./img.png'，如果publicPath为'/'，图片显示不了，因为图片都打包放在了dist中，那么你就要把publicPath设置为”/dist”。
-
举个栗子：
假设你将这个工程部署在服务器 http://server/
通过将output.publicPath设置为/assets/，这个工程将会在http://server/assets/找到webpack资源。
在这种前提下，所有与webpack相关的路径都会被重写成以/assets/开头。
src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)
-
devServer 中的publicPath
此路径下的打包文件可在浏览器中访问。
假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 devServer.publicPath 是 '/'，所以你的包(bundle)可以通过http://localhost:8080/bundle.js 访问。
修改 devServer.publicPath，将 bundle 放在指定目录下：
module.exports = {
//...
devServer: {
publicPath: '/assets/' // 现在可以通过 http://localhost:8080/assets/bundle.js 访问 bundle。
}
};
dev 时 在内存中的路径，大多时候，output.publicPath和devserver.publicPath 保持一致。
最后
如果你在用style-loader或者css sourceMap，你就需要设置publicPath。把它设置成服务器地址的绝对路径，比如http://server/assets/，这样资源可以被正确加载。
