Question

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?"   
  } 
}

Answer 1

`output.path`

用于存储所有输出文件的本地磁盘目录（绝对路径）。

示例： path.join(__dirname, "build/")

Webpack会将所有内容输出到localdisk/path-to-your-project/build/

`output.publicPath`

您上传捆绑文件的位置。 （相对于服务器根目录）

示例： /assets/

假设您在服务器根目录http://server/部署了应用程序。

使用/assets/，该应用会在以下位置找到网络包资源：http://server/assets/。在引擎盖下，webpack遇到的每个网址都将重写为“/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）

Answer 2

在浏览器中执行时，webpack需要知道您将在何处托管生成的捆绑包。因此，它可以分别请求通过code splitting或file-loader加载的其他块（使用url-loader时）或引用的文件。

例如：如果您将http服务器配置为托管/assets/下生成的捆绑包，则应写入：publicPath: "/assets/"

Answer 3

~~publicPath仅用于开发目的~~，我第一次看到这个配置属性时感到很困惑，但是现在我已经使用了webpack一段时间了

假设您将所有js源文件放在src文件夹下，并将您的webpack配置为使用dist将源文件构建到output.path文件夹。

但是您希望在webroot/public/assets这个更有意义的位置提供静态资源，这次您可以使用out.publicPath='/webroot/public/assets'，这样在您的html中，您可以使用{{1}来引用您的js }。

当您请求<script src="/webroot/public/assets/bundle.js"></script>时，webroot/public/assets/bundle.js会在dist文件夹下找到js

更新：

感谢Charlie Martin纠正我的回答

原文：publicPath仅用于开发目的，这不仅仅用于开发目的

不，此选项在开发服务器中很有用，但其目的是在生产中异步加载脚本包。假设您有一个非常大的单页面应用程序（例如Facebook）。 Facebook每次加载主页时都不想提供所有的javascript，因此它只提供主页上所需的内容。然后，当您转到您的个人资料时，它会使用ajax为该页面加载更多javascript。此选项告诉您在服务器上从
加载该捆绑包的位置

Answer 4

您可以使用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时生成。

Answer 5

在我的情况下，我有一个cdn，我将所有处理过的静态文件（js，imgs，fonts ...）放入我的cdn，假设网址为http://my.cdn.com/

所以，如果有一个js文件是原始的参考url在html中是＆＃39; ./ js / my.js＆＃39; 它应该在生产环境中成为http://my.cdn.com/js/my.js

在这种情况下，我需要做的就是设置publicpath equals http://my.cdn.com/ 和webpack将自动添加该前缀

Answer 6

文件名指定文件名，在构建步骤后，所有捆绑的代码都将累积到其中。

路径指定输出目录， 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时，单词服务器可以是webpack-dev-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服务器从 server <中的指定虚拟位置提供此捆绑文件，即 examples / dist / app.js / strong>，即/ public / assets / js。因此，在您的html文件中，您必须将此文件引用为

<script src="public/assets/js/app.js"></script>

因此，总而言之，无论何时请求文件 public / assets / js / app.js <，PublicPath就像服务器中的virtual directory与output.path配置指定的output directory之间的映射。 / strong>来，将提供 /examples/dist/app.js 文件

Answer 7

webpack2文档以更清晰的方式解释了这一点： https://webpack.js.org/guides/public-path/#use-cases

webpack具有非常有用的配置，可让您指定应用程序上所有资产的基本路径。它叫做publicPath。

Answer 8

webpack使用publicPath作为css中定义的替换相对路径，用于引用图像和字体文件。

Answer 9

这里有很多很好的答案，所以我将重点介绍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。

Webpack中的“publicPath”有什么作用？

9 个答案:

`output.path`

`output.publicPath`