Webpack 的output中 path与publicPath的区别详解

1. 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 页面（或 标签）解析。
• publicPath是用于引导静态资源(js,css,img)，比如在页面引入了background-image:url(’/static/people.png’); 这时候这里的路径就会相对publicPath做调整；指的是将来这些静态资源将会放到哪，由线上静态资源存放的路径决定的

publicPath取决于根目录path的位置，因为打包的文件都在path目录了，这些文件的引用都是基于该目录的。假设path为public，引用的图片路径是'./img.png'，如果publicPath为'/'，图片显示不了，因为图片都打包放在了dist中，那么你就要把publicPath设置为”/dist”。

2. 举个栗子：

假设你将这个工程部署在服务器 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)

3. 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/，这样资源可以被正确加载。