Webpack docs 声明 output.publicPath 是：
从 JavaScript 来看
output.path。
您能否详细说明这实际上意味着什么？
我使用output.path 和output.filename 来指定Webpack 应该在哪里输出结果，但我不确定在output.publicPath 中应该放什么以及是否需要。
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
【问题讨论】：
path，什么时候使用publicPath？
标签： javascript webpack
在浏览器中执行时，webpack 需要知道您将在哪里托管生成的包。因此它能够请求额外的块（当使用code splitting时）或分别通过file-loader或url-loader加载的引用文件。
例如：如果您将 http 服务器配置为在 /assets/ 下托管生成的包，您应该编写：publicPath: "/assets/"
【讨论】：
publicPath 只是用于开发目的，我第一次看到这个配置属性时很困惑，但现在我已经使用了一段时间的 webpack，这很有意义
假设您将所有 js 源文件放在 src 文件夹下，并配置您的 webpack 以将源文件构建到带有 output.path 的 dist 文件夹。
但是你想把你的静态资源放在一个更有意义的位置，比如webroot/public/assets，这次你可以使用out.publicPath='/webroot/public/assets'，这样在你的html中，你就可以用<script src="/webroot/public/assets/bundle.js"></script>引用你的js了。
当你请求webroot/public/assets/bundle.js时webpack-dev-server会在dist文件夹下找到js
更新：
感谢查理·马丁纠正我的回答
原文：publicPath 仅用于开发目的，这不仅仅是用于开发目的
不，这个选项在开发服务器中很有用，但它的目的是在生产中异步加载脚本包。假设您有一个非常大的单页应用程序（例如 Facebook）。 Facebook 不希望每次加载主页时都提供所有的 javascript，因此它只提供主页上需要的内容。然后，当您转到您的个人资料时，它会使用 ajax 为该页面加载更多 javascript。这个选项告诉它在你的服务器上从哪里加载那个包
【讨论】：
publichPath 来劫持请求并返回内存中的文件。
webpack -p 来构建您的资产，并且您的资产应该由您的应用程序服务器或您的 nginx 服务器而不是 webpack 服务器或 webpack 中间件提供服务，所以这个config 在生产环境中不再有用，对吗？
就我而言， 我有一个cdn，我将把所有处理过的静态文件（js、imgs、fonts...）放到我的cdn中，假设url是http://my.cdn.com/
所以如果有一个 js 文件是 html 中的原始引用 url 是 './js/my.js' 在生产环境中应该变成http://my.cdn.com/js/my.js
在这种情况下，我需要做的就是设置 publicpath 等于 http://my.cdn.com/ webpack 会自动添加该前缀
【讨论】：
output.path存储所有输出文件的本地磁盘目录（绝对路径）。
示例： path.join(__dirname, "build/")
Webpack 会将所有内容输出到localdisk/path-to-your-project/build/
output.publicPath您上传捆绑文件的位置。 （绝对路径，或相对于主 HTML 文件）
示例： /assets/
假设您将应用部署在服务器根目录http://server/。
通过使用/assets/，应用程序将在：http://server/assets/ 找到 webpack 资产。在后台，webpack 遇到的每个 url 都将被重写为以“/assets/”开头。
src="picture.jpg"重写 ➡src="/assets/picture.jpg"访问者：(
http://server/assets/picture.jpg)
src="/img/picture.jpg"重写➡src="/assets/img/picture.jpg"访问者：(
http://server/assets/img/picture.jpg)
【讨论】：
output.publicPath 有一个 'auto' 选项。但除了消耗额外的 CPU 周期以达到与普通 '' 或 './' 相同的效果之外，它还能做什么。没有线索。谁知道那个？
publicPath 被 webpack 用于替换你的 css 中定义的用于引用图像和字体文件的相对路径。
【讨论】：
您可以使用 publicPath 指向您希望 webpack-dev-server 为其“虚拟”文件提供服务的位置。 publicPath 选项将与 webpack-dev-server 的 content-build 选项的位置相同。 webpack-dev-server 创建将在您启动时使用的虚拟文件。这些虚拟文件类似于 webpack 创建的实际捆绑文件。基本上你会希望 --content-base 选项指向你的 index.html 所在的目录。这是一个示例设置：
//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js
//webpack.config.js
var path = require("path");
module.exports = {
...
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
filename: "bundle.js"
}
};
//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>
//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build
webpack-dev-server 创建了一个虚拟资产文件夹以及它所引用的虚拟 bundle.js 文件。您可以通过访问 localhost:8080/assets/bundle.js 进行测试，然后在您的应用程序中检查这些文件。它们仅在您运行 webpack-dev-server 时生成。
【讨论】：
/build/bundle.js，我将不得不在我的index.html 文件中更改src，对吗？
src 行。现在它指向"assets/bundle.js"，如果它转移到生产中，捆绑包将位于"build/bundle.js"，所以我必须在html src行中将它更改为src="build/bundle.js"。还是有更自动化的方法？
/assets/ 更改为/build。这样我就不必更改我的 index.html。我还将 index.html 从 build 文件夹移到应用程序的根目录中。
webpack2 文档以更简洁的方式解释了这一点： https://webpack.js.org/guides/public-path/#use-cases
webpack 有一个非常有用的配置，可以让您为应用程序中的所有资产指定基本路径。它被称为 publicPath。
【讨论】：
文件名指定文件名，在完成构建步骤后，所有捆绑代码都将累积到该文件中。
path 指定 app.js（文件名）将保存在磁盘中的 输出目录。如果没有输出目录，webpack 将为您创建该目录。 例如：
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js"
}
}
这将创建一个目录 myproject/examples/dist 并在该目录下创建 app.js、/myproject/examples/dist/app.js 。构建完成后，您可以浏览到 myproject/examples/dist/app.js 以查看捆绑的代码
publicPath：“我应该在这里放什么？”
publicPath 指定 web 服务器 中的虚拟目录，从中获取捆绑文件 app.js。请记住，使用 publicPath 时的 server 一词可以是 webpack-dev-server 或 express server 或您可以与 webpack 一起使用的其他服务器。
例如
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: path.resolve("/public/assets/js")
}
}
此配置告诉 webpack 将所有 js 文件捆绑到 examples/dist/app.js 中并写入该文件。
publicPath 告诉 webpack-dev-server 或 express 服务器从 serverexamples/dist/app.js /strong> 即 /public/assets/js。因此，在您的 html 文件中，您必须将此文件引用为
<script src="public/assets/js/app.js"></script>
总之，publicPath 就像你服务器中的virtual directory 和 output.path 配置指定的output directory 之间的映射，每当请求文件 public/assets/js/app.js 时, /examples/dist/app.js 文件将被提供
【讨论】：
这里有很多好的答案，所以我会专注于output.publicPath: 'auto'。
说当你构建你的项目时，你会得到下一个文件夹结构：
dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html
在这种情况下，我们的 index.html 文件都必须具有指向我们的 app.js 和 app.css（下一个 - 资产）的正确路径。让我们考虑下一个场景：
publicPath: '' 或publicPath: '/':
当托管在服务器上时，两者都指向网站的根目录（例如 https://localhost:8080/），所以一切正常。
但如果您尝试在本地打开它们，blog/index.html 将没有正确的资源路径。在publicPath: '' 的情况下，将在blog/ 文件夹中搜索资产，因为这是相对路径指向的位置。 index.html 仍然有正确的资产路径。
如果是publicPath: '/'，/ 指向文件系统的根目录，因此我们的 index.html 文件都没有正确的资产路径。
publicPath: 'auto':
在这种情况下，我们的两个 index.html 文件都将具有资产的相对路径。所以，blog/index.html 将指向../app.css，index.html 将指向app.css。
【讨论】：