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

JavaScript Webpack

镜风

2020-05-28

Webpack文档指出output.publicPath：

在output.path与JavaScript的视图。

您能否详细说明这实际上意味着什么？

我使用output.path和output.filename来指定Webpack在哪里输出结果，但是我不确定要放入什么output.publicPath以及是否需要。

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}

第4212篇《Webpack中的“ publicPath”有什么作用？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

神奇神奇Near 2020.05.28

webpack使用publicPath来替换在CSS中定义的用于引用图像和字体文件的相对路径。

阿良 2020.05.28

webpack2文档以更简洁的方式对此进行了解释：https ://webpack.js.org/guides/public-path/#use-cases

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

西里老丝 2020.05.28

在我的情况下，我有一个CDN，并且我将所有处理过的静态文件（js，imgs，字体...）放入我的CDN中，假设URL为http://my.cdn.com/

因此，如果存在一个js文件，该文件是html中的原始引用网址是“ ./js/my.js”，则在生产环境中应变为http://my.cdn.com/js/my.js

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

小宇宙十三 2020.05.28

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

镜风 2020.05.28

filename指定在完成构建步骤后所有捆绑代码将累积到的文件名。

path指定将在其中将app.js（文件名）保存到磁盘的输出目录。如果没有输出目录，则webpack将为您创建该目录。例如：

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

这将创建一个目录的myproject /例子/ 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服务器从服务器中的指定虚拟位置（即/ public / assets / js）提供此捆绑文件，即examples / dist / app.js。因此，在您的html文件中，您必须将此文件引用为

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

因此，总而言之，publicPath就像virtual directory服务器之间的映射，output directory并由output.path配置指定。只要对文件public / assets / js / app.js的请求到来，就会提供/examples/dist/app.js文件

神离 2020.05.28

`output.path`

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

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

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

`output.publicPath`

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

例： /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）