[译]webpack官网文档 ：指南 -- 22.公共路径

原创翻译，转载请注明出处。

原文地址：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 --