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