Mis*_*hko 234 javascript webpack
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?"
}
}
Kev*_*Law 111
这是我发现的,希望它会帮助你们中的一些人.(如果有任何问题,请纠正我):
output.path用于存储所有输出文件的本地磁盘目录(绝对路径).
例: path.join(__dirname, "build/")
Webpack将输出所有内容 localdisk/path-to-your-project/build/
output.publicPath您上传捆绑文件的位置.(相对于服务器根目录)
例: /assets/
假设您在服务器根目录部署了应用程序http://server/.
通过使用/assets/,该应用程序将在以下位置找到webpack资产:http://server/assets/.在引擎盖下,webpack遇到的每个网址都将以" /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)
重要
如果您正在使用启用output.path了css path.join(__dirname, "build/")选项的+加载器,则必须进行设置localdisk/path-to-your-project/build/.将其设置为服务器地址的完整绝对路径,例如,output.publicPath以便正确加载资源.
请参阅:https://github.com/webpack/style-loader/issues/55
Joh*_*ald 62
在浏览器中执行时,webpack需要知道您将在何处托管生成的捆绑包.因此,它能够分别请求额外的块(当使用代码分割时)或通过文件加载器或url-loader加载的引用文件.
例如:如果您将http服务器配置为托管生成的bundle,/assets/则应编写:publicPath: "/assets/"
Sea*_*ean 49
publicPath仅用于开发目的我第一次看到这个配置属性时感到很困惑,但现在我已经使用了webpack一段时间了
假设您将所有js源文件放在src文件夹下,并配置webpack以将源文件构建到dist文件夹中output.path.
但是你想在一个更有意义的位置提供你的静态资产,比如webroot/public/assets这次你可以使用out.publicPath='/webroot/public/assets',这样你的html就可以引用你的js了<script src="/webroot/public/assets/bundle.js"></script>.
当您请求webroot/public/assets/bundle.js该webpack-dev-server会发现dist文件夹下的JS
更新:
感谢Charlie Martin纠正我的回答
original:publicPath仅用于开发目的,这不仅仅用于开发目的
不,此选项在开发服务器中很有用,但其目的是在生产中异步加载脚本包.假设您有一个非常大的单页面应用程序(例如Facebook).Facebook不希望每次加载主页时都提供所有的javascript,因此它只提供主页上所需的内容.然后,当您转到您的个人资料时,它会使用ajax为该页面加载更多javascript.此选项告诉您从服务器上加载该捆绑包的位置
ude*_*tha 26
filename指定文件的名称，您的所有捆绑代码在完成构建步骤后将累积到该文件中。
路径指定输出目录，其中app.js（文件名）是会得到保存在磁盘上。如果没有输出目录，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 服务器从服务器中指定的虚拟位置（即 /public/assets/js）提供这个捆绑文件，即examples/dist/app.js。因此，在您的 html 文件中，您必须将此文件引用为
<script src="public/assets/js/app.js"></script>
因此，在总结，publicPath像之间的映射virtual directory在你的服务器，并output directory通过output.path配置，只要对文件请求指定的公共/资产/ JS / app.js来，/examples/dist/app.js文件将被送达
Isa*_*Pak 17
您可以使用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时生成.
Ken*_*ood 14
在我的情况下,我有一个cdn,我将所有处理过的静态文件(js,imgs,fonts ...)放入我的cdn,假设网址是http://my.cdn.com/
因此,如果有一个js文件是原始的参考url在html中是'./js/my.js'它应该在生产环境中成为http://my.cdn.com/js/my.js
在这种情况下,我需要做的只是设置publicpath等于http://my.cdn.com/ 和webpack将自动添加该前缀
小智 5
这里有很多很好的答案，所以我将重点关注output.publicPath: 'auto'。
假设当你构建项目时，你会得到下一个文件夹结构：
dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html
在这种情况下，我们的 index.html 文件必须具有指向 app.js 和 app.css （下一个 - 资产）的正确路径。让我们考虑以下场景：
publicPath: ''或者publicPath: '/'：
当托管在服务器上时，两者都指向网站的根目录（例如 https://localhost:8080/），因此一切正常。
但是，如果您尝试在本地打开它们，blog/index.html则不会有正确的资产路径。如果是publicPath: ''资产，将在文件夹中搜索blog/，因为这是相对路径指向的位置。index.html仍然有正确的资产路径。
在 , 的情况下publicPath: '/'，/指向文件系统的根目录，因此我们的两个 index.html 文件都没有正确的资产路径。
publicPath: 'auto'：
在这种情况下，我们的两个 index.html 文件都将具有资产的相对路径。因此，blog/index.html将指向../app.css，并将index.html指向app.css。
| 归档时间： |
|
| 查看次数： |
86135 次 |
| 最近记录： |