Webpack文档声明了这个输出。publicPath是:

输出。路径从JavaScript的视图。

你能详细说明一下这到底是什么意思吗?

我使用输出。路径和输出。文件名指定Webpack应该在哪里输出结果,但我不确定在输出中放什么。publicPath,以及是否需要。

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

当前回答

publicPath只是用于开发目的,我在第一次看到这个配置属性时感到困惑,但它是有意义的,因为我已经使用webpack一段时间了

假设你把你所有的js源文件放在SRC文件夹下,你配置你的webpack将源文件构建到带有output.path的dist文件夹中。

但是你想把你的静态资产放在一个更有意义的位置,比如webroot/public/assets,这次你可以使用out。publicPath='/webroot/public/assets',这样在你的html中,你可以引用你的js与<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会自动添加这个前缀

publicPath只是用于开发目的,我在第一次看到这个配置属性时感到困惑,但它是有意义的,因为我已经使用webpack一段时间了

假设你把你所有的js源文件放在SRC文件夹下,你配置你的webpack将源文件构建到带有output.path的dist文件夹中。

但是你想把你的静态资产放在一个更有意义的位置,比如webroot/public/assets,这次你可以使用out。publicPath='/webroot/public/assets',这样在你的html中,你可以引用你的js与<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。这个选项告诉它从服务器的哪个位置加载这个包

这里有很多很好的答案,所以我将重点关注输出。publicPath:“汽车”。

当你构建你的项目时,你会得到下一个文件夹结构:

dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html

在这种情况下,我们的index.html文件必须有一个正确的路径到我们的app.js和app.css (next - assets)。让我们考虑下一种情况:

publicPath: '' or publicPath: '/': When hosted on a server both point to the root of the website (ex. https://localhost:8080/), so everything works fine. But should you try to open them locally, blog/index.html won't have a correct path to the assets. In case of publicPath: '' assets will be searched in the blog/ folder since that's where the relative path is pointing to. index.html still has the correct path to assets. And in case of publicPath: '/', / points to the root of the filesystem, so neither of our index.html files will have a correct path to assets. publicPath: 'auto': In this case, both our index.html files will have relative paths to the assets. So, blog/index.html will be pointing to ../app.css, and index.html will be pointing to app.css.

output.path

存储所有输出文件的本地磁盘目录(绝对路径)。

例如:路径。加入(__dirname“构建/”)

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


output.publicPath

你上传捆绑文件的地方。(绝对路径,或相对于主HTML文件)

例如:/ /资产

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

通过使用/assets/,应用程序将在http://server/assets/找到webpack资产。在底层,webpack遇到的每个url都会被重写为以“/assets/”开头。

src="/assets/picture.jpg" 访问人员:(http://server/assets/picture.jpg) src="/img/picture.jpg"重写。src="/assets/img/picture.jpg" 访问人员:(http://server/assets/img/picture.jpg)

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

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