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';