Webpack 实践技巧与建议

Webpack 实践技巧与建议翻译自webpack-tricks，从属于笔者的Web Frontend Introduction And Best Practices:前端入门与最佳实践。如果想了解更多的编程技术体系概况可以参考2016:我的技术体系结构图，如果想及时了解一周优秀外文资料可以参考某熊周刊系列:一周推荐外文技术资料(12.1)。

本文是笔者在使用Webpack的过程中总结的一系列建议与技巧，不过需要注意的是这些小技巧都是关于Webpack 1的。Webpack 2与Webpack 1相比其API发生了较大变化，本文提及的不少技巧可能在Webpack 2并不能起作用。如果你想了解从Webpack 1迁移到Webpack 2的详细教程，可以参考这里，另外可以参考笔者的基于Webpack 2的模板 Webpack2-React-Redux-Boilerplate。

进度反馈

可以在使用Webpack的时候添加如下选项:

--progress --colors

压缩

可以在进行生产环境构建时添加-p选项：

webpack -p

多模块分割

在设置output的文件名时可以使用[name].js多匹配名，如下的例子会生成a.js与b.js：

module.exports = {
  entry: {
    a: './a',
    b: './b'
  },
  output: { filename: '[name].js' }
}

如果你担心代码重复的问题，可以使用CommonsChunkPlugin来抽取出多个输出文件的公共代码:

plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]
<script src='init.js'></script>
<script src='a.js'></script>

分割应用于渲染代码

同样是使用CommonsChunkPlugin来讲公共的渲染代码移动到vendor.js中:

var webpack = require('webpack')

module.exports = {
  entry: {
    app: './app.js',
    vendor: ['jquery', 'underscore', ...]
  },

  output: {
    filename: '[name].js'
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor')
  ]
}

其工作流程如下，具体可以参考Code Splitting:

添加vendor入口并且指定关联库
CommonsChunkPlugin会从app.js中移除相关库
CommonsChunkPlugin 同样会把Webpack的运行时依赖迁移到vendor.js中

Source Maps

目前最流行的Source Maps选项是cheap-module-eval-source-map，这个工具会帮助开发环境下在Chrome/Firefox中显示源代码文件，其速度快于source-map与eval-source-map：

const DEBUG = process.env.NODE_ENV !== 'production'

module.exports = {
  debug: DEBUG ? true : false,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}

在Chrome Devtools你可以在webpack:///foo.js?a93h路径下查看文件，也可以选择自定义配置:

  output: {
    devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
  }

CSS

作者正在编辑中，请过几日回来查看。

开发模式

如果你希望在仅仅在开发模式下开启某些选项:

const DEBUG = process.env.NODE_ENV !== 'production'

module.exports = {
  debug: DEBUG ? true : false,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}

这个时候你需要注意在编译生产环境版本时使用如下命令:env NODE_ENV=production webpack -p

包体组成分析

如果你觉得你的包体有点匪夷所思的大并且想具体了解到底是哪个模块占据了大量的提及，可以使用webpack-bundle-size-analyzer:

$ yarn global add webpack-bundle-size-analyzer

$ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer
jquery: 260.93 KB (37.1%)
moment: 137.34 KB (19.5%)
parsleyjs: 87.88 KB (12.5%)
bootstrap-sass: 68.07 KB (9.68%)
...

优化React包体

React在开发模式下会自带开发工具，而我们希望在生产环境下能够移除该工具从而减少包体，我们可以通过如下配置:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    }
  })
]

优化Lodash

Lodash是非常不错的工具库，不过很多时候我们仅需要其一小部分功能，此时lodash-webpack-plugin就派上了用场:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const config = {
  plugins: [
    new LodashModuleReplacementPlugin({
      path: true,
      flattening: true
    })
  ]
};

引用某个文件夹中的所有文件

如果你希望达到如下的效果:

require('./behaviors/*') /* Doesn't work! */

你需要使用require.context:

// http://stackoverflow.com/a/30652110/873870

function requireAll (r) { r.keys().forEach(r) }

requireAll(require.context('./behaviors/', true, /\.js$/))s