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。这个选项告诉它从服务器的哪个位置加载这个包
Filename指定文件的名称,所有绑定的代码在经过构建步骤后将被积累到其中。
Path指定app.js(filename)将被保存在磁盘中的输出目录。如果没有输出目录,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 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从服务器ie /public/assets/js中指定的虚拟位置提供这个捆绑文件ie examples/dist/app.js。在html文件中,你需要引用这个文件为
<script src="public/assets/js/app.js"></script>
总之,publicPath类似于服务器中的虚拟目录和output指定的输出目录之间的映射。当public/assets/js/app.js文件被请求时,/examples/dist/app.js文件将被服务
您可以使用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时生成。
这里有很多很好的答案,所以我将重点关注输出。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.