[[190096]]

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

進度反饋

可以在使用Webpack的時候添加如下選項:

--progress --colors 

壓縮

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

webpack -p 

多模塊分割

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

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

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

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

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

同樣是使用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入口并且指定關(guān)聯(lián)庫
• CommonsChunkPlugin會從app.js中移除相關(guān)庫
• CommonsChunkPlugin 同樣會把Webpack的運行時依賴遷移到vendor.js中

Source Maps

目前***的Source Maps選項是cheap-module-eval-source-map，這個工具會幫助開發(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

作者正在編輯中，請過幾日回來查看。

開發(fā)模式

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

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

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

包體組成分析

如果你覺得你的包體有點匪夷所思的大并且想具體了解到底是哪個模塊占據(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在開發(fā)模式下會自帶開發(fā)工具，而我們希望在生產(chǎn)環(huán)境下能夠移除該工具從而減少包體，我們可以通過如下配置:

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

優(yōu)化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 

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

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