webpack2.x 中文文档 翻译 之 公开路径(pbulic path)

公开路径(pbulic path)

该条已在webpack2.x中文网存在,点击这里

webpack有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。它叫做publicPath。

使用案例(Use cases)

这里有有些实际应用中的案例，其中它使用的非常灵活。

在打包生产时设置值 (set value on build time)

在开发时我们通常会有一个assets/文件夹，并且他和index页面处于同级，但是我们想让这些静态资源都在生产时放到cdn吗？

为了解决这个问题，我们仅仅使用一个旧的环境变量。我们有一个变量ASSET_PATH:

import webpack from 'webpack';
//无论环境变量是什么，其他使用root
const ASSET_PATH = process.env.ASSET_PATH || '/';

export default{
  output:{
    publicPath:ASSET_PATH
  },

  plugins: [
    <!--这个能够使我们在自己的代码中安全的使用-->
    new webpack.DefinePlugin({
      'precess.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
    })
  ]
};

运行时编译（set value on the fly)

另一个方式设置到on the fly。webpack暴露了全部变量，这允许你做到这些。__webpack_public_path__。所以在你的应用入口，你只需这样做:

__webpack_public_path__ = process.env.ASSET_PATH;

因为我们已经使用了DefinePlugin在我们的设置中，process.env.ASSET_PATH将会一直被定义。