webpack动态路径:__webpack_public_path__作用
Author：zhoulujun Date：
webpack如何指定资源加载路径
首先看一下webpack文档：https://webpack.docschina.org/guides/public-path/
webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。
在构建项目时设置路径值
开发模式中，我们通常有一个 assets/ 文件夹，它往往存放在和首页一个级别的目录下。这样是挺方便；但是如果在生产环境下，你想把这些静态文件统一使用CDN加载，那该怎么办？
要解决这个问题，你可以使用有着悠久历史的环境变量。比如说，我们设置了一个名为 ASSET_PATH 的变量：
import webpack from 'webpack';
// 如果预先定义过环境变量，就将其赋值给`ASSET_PATH`变量，否则赋值为根目录
const ASSET_PATH = process.env.ASSET_PATH || '/';
export default {
output: {
publicPath: ASSET_PATH
},
plugins: [
// 该插件帮助我们安心地使用环境变量
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
})
]
};即时设定路径值
另一个可能出现的情况是，我们需要即时设置公共路径。webpack 提供一个全局变量供你设置，它名叫 webpack_public_path。所以在你的项目入口，你可以简单地设置如下：
__webpack_public_path__ = process.env.ASSET_PATH;
一切设置完成。因为我们已经在我们的配置项中使用了DefinePlugin， process.env.ASSET_PATH 就已经被定义了， 所以让我们能够安心地使用它了。
警告：请注意，如果你在入口文件中使用 ES6 模块导入，则在导入后对 webpack_public_path 进行赋值。在这种情况下，你必须将公共路径(public path)赋值移至自己的专属模块，然后将其导入到你的 entry.js 之上：
// entry.js import './public-path'; import './app';
__webpack_public_path__ 是如何运行的
首先对于动态文件dynamic import， webpack 是如何解析的。
// 动态文件
const testFile = () => import('./test.js')
// 解析伪代码：
const testFile = __webpack_require__.e('./test.js')
var __webpack_require__.e = function (url) {
return new Promise((resolve, reject) => {
var script = document.createElement('script')
script.src = __webpack_require__.p + url
script.onload = resolve()
script.error = reject()
})
}详情
这里有一个很重要的参数__webpack_require__.p，__webpack__require__.p = 配置文件的publicPath。
如果你需要指定__webpack__public_path__，需要在文件的最开头引入。
当你显示的指定了__webpack_public_path__的值，那么它将会在运行时覆盖__webpack__require__.p的值，也就是说配置项的publicPath会失真。
打包代码如何查看路径是否生效：
我配置publickPath 或者__webpack__public_path__，如何查看器是否生效了呢？
把打包的文件格式化一下，一般可以找到如下代码。
在chrome里面debugger一下就可
参考文章：
【webpack】__webpack_public_path__作用 https://www.jianshu.com/p/5f99acb6aa10
webpack 公共路径设置的全局变量 __webpack_public_path__ https://blog.csdn.net/qq_26642611/article/details/108151700
转载本站文章《webpack动态路径:__webpack_public_path__作用》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2023_0302_8928.html