Webpack 中的“ publicPath”是做什么的？

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?"
}
}
141044 次浏览
小开

当在浏览器中执行时，webpack需要知道你将在哪里托管生成的bundle。因此，它能够请求额外的块(当使用代码分离时)或分别通过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

更新:

感谢查理·马丁纠正我的答案

original: publicPath仅用于开发目的，这不仅仅是为了开发目的

不，这个选项在开发服务器中很有用，但它的目的是在生产环境中异步加载脚本包。假设您有一个非常大的单页应用程序(例如Facebook)。Facebook不希望每次你加载主页时都提供所有的javascript，所以它只提供主页上需要的javascript。然后，当你转到你的个人资料时，它会为那个页面加载更多的javascript和ajax。这个选项告诉它从服务器的哪个位置加载这个包

小开

在我的例子中， 我有一个cdn，我要把我所有处理过的静态文件(js,imgs，字体…)放入我的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)

小开

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

小开

您可以使用publicPath指向您希望webpack-dev-server提供其“虚拟”文件的位置。publicPath选项将与webpack-dev-server的内容构建选项位于同一位置。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时生成。

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

Webpack有一个非常有用的配置，它允许您为应用程序中的所有资产指定基本路径。它叫做publicPath。

小开

文件名指定所有捆绑的代码都将在经过构建步骤后积累起来。进入的文件名称

路径指定app.js(文件名)将被保存在磁盘中的输出目录。如果没有输出目录，webpack将为您创建该目录。 例如:

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

这将创建一个目录myproject / dist /例子，并在该目录下创建app.js， / myproject / / dist / app.js例子。构建之后，你可以浏览myproject / / dist / app.js例子以查看捆绑的代码

publicPath:“我应该在这里放什么?”

publicPath指定了web服务器中的虚拟目录，捆绑的文件，app.js将从那里被提供。请记住，在使用publicPath时，服务器这个词可以是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文件打包到例子/ dist / app.js中并写入该文件。

publicPath告诉webpack-dev-server或express服务器从服务器 ie /public/assets/js中指定的虚拟位置提供这个绑定文件ie 例子/ dist / app.js。在html文件中，你需要引用这个文件为

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

总之，publicPath类似于服务器中的virtual directory和输出指定的output directory之间的映射。当请求文件公共/资产/ js / app.js时，/ / 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 (next - assets)。让我们考虑下一种情况:

  • publicPath: ''或publicPath: '/':

    当托管在服务器上时，两者都指向网站的根目录(例如https://localhost:8080/)，所以一切都很好。

    但是如果您尝试在本地打开它们，blog/index.html将没有指向资产的正确路径。在publicPath: ''的情况下，资产将在blog/文件夹中搜索，因为这是相对路径指向的地方。index.html仍然有正确的资产路径。

    在publicPath: '/'的情况下，/指向文件系统的根，因此index.html文件都没有正确的资源路径。

  • < p > publicPath: 'auto':

    在本例中，我们的index.html文件都有到资产的相对路径。因此，blog/index.html将指向../app.css，而index.html将指向app.css。


提交答案