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