優化webpack配置

happypack

happypack能夠加快rebuild的速度

• 在開發的時候，須要將babel-loader替換成happypack/loader

{
  test: /\.(js|jsx)$/,
  exclude: /(node_modules|vendor)/,
  loader: isDev ? 'happypack/loader' : 'babel-loader'
}

• 同時添加插件, 根據須要定義不一樣的babel配置，控制線程的數量

new HappyPack({
  loaders: [{
    path: 'babel-loader',
    query: getBabelrc({isDev})
  }],
  threads: 4
})

AutoDllPlugin

一樣用來加快rebuild速度。它的原理和webpack提供的dll加速方案同樣，將經常使用的不變的模塊編譯成一個文件，之後rebuild的時候再也不編譯，統統指向那個預編譯好的文件。那是一套極其繁瑣的方案，這個插件幫你簡化了配置。

new AutoDllPlugin({
  inject: true, // will inject the DLL bundles to index.html
  filename: '[name].[hash].js',
  entry: {
    vendor: ['react', 'react-dom']
  }
})

that's all.

ExtractTextPlugin

用來將你項目中的全部css提出來變成一個文件。在生產環境中能夠減小請求，可是不要在開發環境中使用，這會減慢你的編譯速度。

這個配置有點繁瑣，你們以前去github上看吧

緩存你的vendor文件

通常咱們使用的node_modules裏的文件是不會變，因此咱們常常會這麼作，把全部來自node_modules的文件編譯成一個vendor.js，而後再加載咱們的main.js。那咱們怎麼去讓瀏覽器緩存咱們的vendor.js呢，要作幾件事

• 將 [name].[hash].js改爲[name].[chunkhash].js,這是爲了給每一個文件各自不一樣的hash，否則每次build，全部的文件hash會同樣。

咱們每次build的時候，hash都會變，這是由於webpack運行的時候須要一段runtime的代碼，這段代碼一直在變，致使每次build都會產生不一樣的hash，而[name].[hash].js會將該hash用於全部的文件。

• 將這段runtime的代碼抽離出來，通常這段代碼會加在第一個被加載的js文件裏，這就致使這個js文件的hash一直在變。
• 最後，咱們會獲得3個文件 runtime.js vendor.js main.js,依次插入html中，而且這個vendor.js本身的hash是不會隨着build而改變的。這個時候，咱們就可使用manifest文件來緩存了。

webpack官網有教程，你們以前去上面看吧

NamedModulesPlugin

webpack爲了減少文件大小，會對模塊重命名。在你運行build完的js，有什麼錯誤信息打印出來的時候，你徹底看不懂這是個什麼模塊，這個時候你就須要這個插件，可是也不要在生產環境中用，會增長你的文件大小。

new webpack.NamedModulesPlugin()

that's all.

build出按文件類型分類的文件夾

對與我這種強迫症，我但願我build出來的東西都是正確歸類，整齊擺放的，因此我但願個人js通通在js文件夾，css通通在css文件夾

• 首先是css

new ExtractTextPlugin({
  filename: getPath => getPath('css/[name].[contenthash].css').replace('css/js', 'css'),
  allChunks: true
})

原本filename填css/[name].[contenthash].css應該就足夠了，可是它會把你放在css/js文件夾下，因此在issue下，找到了這種方法來把css/js替換成css

• 其他的很簡單，在咱們給咱們的module取名的時候，取成js/xx就行，例如

new webpack.optimize.CommonsChunkPlugin({
  name: 'js/vendor',
  minChunks: function(module) {
    //去掉sass
    if(module.resource && (/^.*\.(css|scss|sass)$/).test(module.resource)) {
      return false;
    }
    //來自node_modules的文件統一打進vendor
    return module.context && module.context.indexOf("node_modules") !== -1;
  }
}),
new webpack.optimize.CommonsChunkPlugin({
  name: "js/runtime",
  minChunks: Infinity
})

記得壓縮的時候丟掉console

new UglifyJSPlugin({
  sourceMap: true,
  compress: {
    warnings: false,  //buid 的時候不要報warnings
    drop_console: true  //no console
  }
})

不只僅是爲了減小代碼量，在生產環境運行時，讓用戶看到你一堆debug信息，實在不雅觀。