原创翻译,转载请注明出处。
原文地址:https://webpack.js.org/guides/public-path/
Webpack有个非常有用的配置,可以为为你应用里的所有资源指定一个基本路径。它被称为公共路径。
用例
有几个在实际应用中这个特性用的很灵巧的例子。
在编译时设定值
在开发模式下我们通常在index页同级别的路径下有一个assets/文件夹。这很好,但是假设你想在产品环境中把所有的静态资源文件都放在CND上呢?
你可以使用一个很好的老的环境变量就可以很容易的解决这个问题。我们有一个变量叫作ASSET_PATH:
import webpack from'webpack'; // Whatever comes as an environment variable, otherwise use root const ASSET_PATH = process.env.ASSET_PATH ||'/'; exportdefault{ output:{ publicPath: ASSET_PATH }, plugins:[ // This makes it possible for us to safely use env vars on our code newwebpack.DefinePlugin({ 'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH) }) ] };
Set value on the fly
另一个用例是在fly中设定公共路径。你可以使用webpack导出的一个全局变量,它是__webpack_public_path__。所以在你应用的入口点,可以很简单的实现:
__webpack_public_path__ = process.env.ASSET_PATH;
它可以满足你的所以需求。因为我们已经在配置文件里使用了DefinePlugin,所以process.env.ASSET_PATH将一直被定义,所以我们可以安全的使用它们。
警告
注意,如果在入口文件里使用ES6的模块引入的话,__webpack_public_path__将在引入结束之后被分配。在这种情况下,我们将不得不把公共路径的分配移到特定的模块中,然后在在entry.js的顶部引入它。
-- End --