Webpack文档声明了这个输出。publicPath是:
输出。路径从JavaScript的视图。
你能详细说明一下这到底是什么意思吗?
我使用输出。路径和输出。文件名指定Webpack应该在哪里输出结果，但我不确定在输出中放什么。publicPath，以及是否需要。
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
当前回答
您可以使用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指向您希望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时生成。
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)
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文件将被服务
webpack使用publicPath替换css中定义的用于引用图像和字体文件的相对路径。
当在浏览器中执行时，webpack需要知道你将在哪里托管生成的bundle。因此，它能够请求额外的块(当使用代码分割时)或分别通过文件加载器或url加载器加载的引用文件。
例如:如果你配置你的http服务器来托管/assets/下生成的包，你应该写:publicPath: "/assets/"
