压缩构建

生成基本构建

安装react并在index.js模块中加载：npm i react --save， require('react');

执行npm run build构建：

  1. [webpack-validator] Config is valid.
  2. Hash: dde0419cac0674732a83
  3. Version: webpack 1.13.0
  4. Time: 1730ms
  5.      Asset       Size  Chunks             Chunk Names
  6.     app.js     133 kB       0  [emitted]  app
  7. app.js.map     157 kB       0  [emitted]  app
  8. index.html  157 bytes          [emitted]
  9.    [0] ./app/index.js 123 bytes {0} [built]
  10.   [37] ./app/component.js 136 bytes {0} [built]
  11.     + 36 hidden modules
  12. Child html-webpack-plugin for "index.html":
  13.         + 3 hidden modules

依赖了react后，生成的app.js有133k

压缩代码

命令行中webpack -p其中-p是--optimize-minimize的简写。

另外也可以通过UglifyJsPlugin插件实现，有更多的配置

  1. // libs/parts.js文件
  2. ...
  3. exports.minify = function() {
  4.   return {
  5.     plugins: [
  6.       new webpack.optimize.UglifyJsPlugin({
  7.         compress: {
  8.           warnings: false
  9.         }
  10.       })
  11.     ]
  12.   };
  13. }
  1. // webpack.config.js文件
  2. ...
  3. // 
  4. switch(process.env.npm_lifecycle_event) {
  5.   case 'build':
  6.     config = merge(
  7.       common,
  8.       {
  9.         devtool: 'source-map'
  10.       },
  11.       parts.minify(),
  12.       parts.setupCSS(PATHS.style)
  13.     );
  14.     break;
  15.   default:
  16.     ... // 开发环境就不需要压缩了
  17. }
  19. module.exports = validate(config);
  20. }

压缩后app.js只有38k

更多UglifyJS配置

  1. new webpack.optimize.UglifyJsPlugin({
  2.   // 格式化代码
  3.   beautify: false,
  4.   // 清除备注
  5.   comments: false,
  6.   // 压缩选项
  7.   compress: {
  8.     warnings: false,
  9.     // 删除`console`语句，也可以用babel-plugin-remove-console插件
  10.     drop_console: true
  11.   },
  12.   // 压缩说明
  13.   mangle: {
  14.     // 不压缩变换$，因为有jquery
  15.     except: ['$'],
  16.     // 忽略IE8
  17.     screw_ie8 : true,
  18.     // 不压缩变换函数名
  19.     keep_fnames: true
  20.   }
  21. })

通过uglify-loader也可以实现

<<上一节:启用sourcemaps >>下一章:设置环境变量