Webpack 文档 中阐述了 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?"
}
}
output.path本地磁盘目录，用于存储所有输出文件（绝对路径）。
示例: path.join(__dirname, "build/")
Webpack 将所有内容输出到 localdisk/path-to-your-project/build/
output.publicPath您上传捆绑文件的位置。 （绝对路径或相对于主 HTML 文件）
示例: /assets/
假设您在服务器根目录下部署了应用程序http://server/。
通过使用/assets/，应用程序将在以下位置查找 webpack 资源：http://server/assets/。实际上，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周期以获得与普通''或'./'相同的效果之外，它还能做什么呢？我不知道。谁知道呢？ - Robert Siemer当webpack在浏览器中执行时，需要知道您将生成的bundle托管在哪里。因此，它能够请求额外的块（使用代码分割时）或通过file-loader或url-loader加载的引用文件。
例如：如果您配置http服务器将生成的bundle托管在/assets/下，则应编写：publicPath："/assets/"
publicPath来劫持请求并返回内存中的文件。 - Wenwebpack -p 来构建您的资产，并且您的资产应该由您的应用服务器或 Nginx 服务器提供，而不是由 webpack 服务器或 webpack 中间件提供。因此，在生产环境中，这个配置已经不再有用了，我说得对吗？ - Seanfilename指定了所有打包完毕的代码都会被累加到这个文件中。name of file。
path指定了输出目录，在该目录下将保存app.js（即filename）文件到磁盘中。如果不存在output directory，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 时的“服务器”可以是 webpack-dev-server 或 express 服务器或您可以与 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服务器在server中指定的虚拟位置/ public / assets / js中提供此捆绑文件，也就是说，您必须在html文件中引用该文件：
<script src="public/assets/js/app.js"></script>
总之，publicPath 就像是你的服务器上虚拟目录与 output.path 配置所指定的输出目录之间的映射。每当请求文件 public/assets/js/app.js 时，将会提供 /examples/dist/app.js 文件。
你可以使用 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，对吗？ - ArchNoobsrc行。现在它指向"assets/bundle.js"，如果转移到生产环境，捆绑包将在"build/bundle.js"中，所以我需要在html src行中更改为src="build/bundle.js"。或者有更自动化的方法吗？ - ArchNoob/assets/ 更改为 /build。这样我就不必更改我的 index.html 文件了。我还将 index.html 文件从构建文件夹移动到应用程序的根目录中。 - Isaac Pakhtml-webpack-plugin。也许你也应该去看看它...它很棒！ - ArchNoob在我的情况下，我有一个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.publicPath: 'auto'。
假设您构建项目时会得到以下文件夹结构：
dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html
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。
publicPath在webpack中用于替换CSS中定义的相对路径，以引用图像和字体文件。
path，什么时候应该使用publicPath？ - wmock