设置环境变量

DefinePlugin插件

webpack提供defineplugin插件，允许重写符合的自由变量free variables。

自由变量即没有var申明的全局变量，例如：

  1. if(bar === 'bar') {
  2.   console.log('bar');
  3. }

如果bar是全局变量且为”bar”, 那么该语句等效于console.log('bar');，这是defineplugin插件的核心

设置process.env.NODE_ENV

如果我们有类似if(process.env.NODE_ENV === 'development')语句，那么可以直接用development替换process.env.NODE_ENV

  1. // libs/parts.js
  2. ...
  3. exports.setFreeVariable = function(key, value) {
  4.   const env = {};
  5.   env[key] = JSON.stringify(value);
  7.   return {
  8.     plugins: [
  9.       new webpack.DefinePlugin(env)
  10.     ]
  11.   };
  12. }
  1. // webpack.config.js
  2. ...
  3. // Detect how npm is run and branch based on that
  4. switch(process.env.npm_lifecycle_event) {
  5.   case 'build':
  6.     config = merge(
  7.       common,
  8.       {
  9.         devtool: 'source-map'
  10.       },
  11.       parts.setFreeVariable(
  12.         'process.env.NODE_ENV',
  13.         'production'
  14.       ),
  15.       parts.minify(),
  16.       parts.setupCSS(PATHS.style)
  17.     );
  18.     break;
  19.   default:
  20.     ...
  21. }
  22. module.exports = validate(config);

最终app.js压缩结果是25.4k，另外如果浏览器支持，还可以用gzip进一步压缩

babel-plugin-transform-inline-environment-variables插件可以实现同样的效果

还有react-dom没有加入，当然可以选择更小的preact或者react-lite他们提供更少的功能，但是却更小

<<上一节:压缩构建 >>下一节:拆分生成文件