[[186469]]

在使用Webpack的過(guò)程中總結(jié)的一系列建議與技巧，不過(guò)需要注意的是這些小技巧都是關(guān)于Webpack 1的。Webpack 2與Webpack 1相比其API發(fā)生了較大變化，本文提及的不少技巧可能在Webpack 2并不能起作用。如果你想了解從Webpack 1遷移到Webpack 2的詳細(xì)教程，可以參考這里，另外可以參考筆者的基于Webpack 2的模板 Webpack2-React-Redux-Boilerplate。

進(jìn)度反饋

可以在使用Webpack的時(shí)候添加如下選項(xiàng):

--progress --colors 

壓縮

可以在進(jìn)行生產(chǎn)環(huán)境構(gòu)建時(shí)添加-p選項(xiàng)：

webpack -p 

多模塊分割

在設(shè)置output的文件名時(shí)可以使用[name].js多匹配名，如下的例子會(huì)生成a.js與b.js：

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

如果你擔(dān)心代碼重復(fù)的問(wèn)題，可以使用CommonsChunkPlugin來(lái)抽取出多個(gè)輸出文件的公共代碼:

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

分割應(yīng)用于渲染代碼

同樣是使用CommonsChunkPlugin來(lái)講公共的渲染代碼移動(dòng)到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入口并且指定關(guān)聯(lián)庫(kù)
• CommonsChunkPlugin會(huì)從app.js中移除相關(guān)庫(kù)
• CommonsChunkPlugin 同樣會(huì)把Webpack的運(yùn)行時(shí)依賴(lài)遷移到vendor.js中

Source Maps

目前***的Source Maps選項(xiàng)是cheap-module-eval-source-map，這個(gè)工具會(huì)幫助開(kāi)發(fā)環(huán)境下在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

作者正在編輯中，請(qǐng)過(guò)幾日回來(lái)查看。

開(kāi)發(fā)模式

如果你希望在僅僅在開(kāi)發(fā)模式下開(kāi)啟某些選項(xiàng):

const DEBUG = process.env.NODE_ENV !== 'production' 
 
module.exports = { 
  debug: DEBUG ? true : false, 
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map' 
} 

這個(gè)時(shí)候你需要注意在編譯生產(chǎn)環(huán)境版本時(shí)使用如下命令:env NODE_ENV=production webpack -p

包體組成分析

如果你覺(jué)得你的包體有點(diǎn)匪夷所思的大并且想具體了解到底是哪個(gè)模塊占據(jù)了大量的提及，可以使用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%) 
... 

優(yōu)化React包體

React在開(kāi)發(fā)模式下會(huì)自帶開(kāi)發(fā)工具，而我們希望在生產(chǎn)環(huán)境下能夠移除該工具從而減少包體，我們可以通過(guò)如下配置:

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

優(yōu)化Lodash

Lodash是非常不錯(cuò)的工具庫(kù)，不過(guò)很多時(shí)候我們僅需要其一小部分功能，此時(shí)lodash-webpack-plugin就派上了用場(chǎng):

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 
 
const config = { 
  plugins: [ 
    new LodashModuleReplacementPlugin({ 
      path: true, 
      flattening: true 
    }) 
  ] 
}; 

引用某個(gè)文件夾中的所有文件

如果你希望達(dá)到如下的效果:

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

你需要使用require.context:

// stackoverflow.com/a/30652110/873870

function requireAll (r) { r.keys().forEach(r) }  
requireAll(require.context('./behaviors/', true, /\.js$/))s 

【本文是51CTO專(zhuān)欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)通過(guò)51CTO與作者聯(lián)系】

戳這里，看該作者更多好文