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

farmerz

公开路径(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将会一直被定义。

阅读 1.4k

前端这两年(2016~)
近几年来前端的变化记录

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
0 条评论

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
宣传栏