大多數項目中會用到的webpack小技巧

原文地址
本文是做者對本身所學的webpack技巧的總結，在沒有指定特殊狀況下適用於webpack 3.0版本。

進度彙報

使用webpack --progress --colors這樣可讓編譯的輸出內容帶有進度和顏色。

壓縮

在生產環境中構建項目時，使用

webpack -p

這行代碼在webpack 2中還會自動設置

process.env.NODE_ENV === 'production'

複數文件打包

經過設置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>

分離app文件與第三方庫文件

使用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')
  ]
}

讓咱們來看看，CommonsChunkPlugin是怎麼起做用的:

• 咱們指定了一個叫vendor的入口，而且它加載了jquery等第三方庫。
• CommonsChunkPlugin識別到這些第三方庫在app.js中出現重複，便將app.js中的第三方庫都移除。
• 在vendor.js中，CommonsChunkPlugin還加入了webpack的運行時間。

參考連接：Code splitting

資源映射 （webpack 1）

最好的資源映射選項是cheap-module-eval-source-map。當使用chrome/firefox的開發者工具時，它會顯示原始資源文件。另外一方面，它比source-map 和 eval-source-map更快。

// 只在webpack 1中有效
const DEBUG = process.env.NODE_ENV !== 'production'

module.exports = {
  debug: DEBUG ? true : false,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}

你的文件在chrome開發者工具中顯示爲webpack:///foo.js?a93h。若是咱們但願文件名顯示得更清晰呢，好比說webpack:///path/to/foo.js？

output: {
    devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
}

參考連接: devtool documentation

資源映射（webpack 2-3）

在webpack 2-3版本中，最好的資源映射選項是cheap-module-source-map，由於cheap-module-eval-source-map策略已經不能在chrome/firefox中顯示正確的路徑。

const DEBUG = process.env.NODE_ENV !== 'production'

module.exports = {
  devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
}

若是你正在使用extract-text-webpack-plugin，能夠用'source-map'替代，不然css的資源映射會不起做用。

// 只有當你使用extract-text-webpack-plugin時
module.exports = {
  devtool: DEBUG ? 'source-map' : 'hidden-source-map'
}

一樣的， 想要 webpack:///path/to/foo.js這樣清晰的路徑，咱們能夠寫成下面這樣：

output: {
  devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
}

參考連接: devtool documentation

輸出css文件

這是一個複雜的過程，你能夠在這裏找到答案。（譯者注：這篇指南目前尚未翻譯。）

開發模式

你想要某些配置只存在於開發環境中嗎？

const DEBUG = process.env.NODE_ENV !== 'production'

// Webpack 1
module.exports = {
  debug: DEBUG ? true : false,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}

// Webpack 2
module.exports = {
  devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
}

在webpack 1中，打包你的項目資源時，經過 env NODE_ENV=production webpack -p 來調用webpack命令。
而在webpack 2中，只要webpack -p就能夠了，由於webpack自動幫你設置了NODE_ENV。

分析包的大小

你想知道資源包中有哪些「重量級」依賴嗎？使用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%)
...

若是你正在生成資源映射，你也可使用source-map-explorer，它可以獨立於webpack工做。

$ yarn global add source-map-explorer

$ source-map-explorer bundle.min.js bundle.min.js.map

參考連接:
webpack-bundle-size-analyzer
source-map-explorer

更小的react項目

react會默認生成一些開發工具，而在生產環境中你並不須要它們。使用EnvironmentPlugin來讓他們人道毀滅吧。這大概會節約30kb左右的空間。

plugins: [
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'development'
  })
]

在webpack 1中，使用env NODE_ENV=production webpack -p命令啓動webpack來打包資源。而在webpack 2中，只要webpack -p就能夠了，理由略。

參考連接: EnvironmentPlugin documentation

更小的Lodash

Lodash 很是有用，可是咱們一般用到的只是其功能中的滄海一粟。 lodash-webpack-plugin 可使用noop, identity或其餘更簡化的選項來替換 feature sets，來幫助你減小lodash佔用的空間。

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const config = {
  plugins: [
    new LodashModuleReplacementPlugin({
      path: true,
      flattening: true
    })
  ]
};

這種方法能夠幫助你省下至少10kb。若是你的項目中lodash的比重很高，那你節省的資源會更多。

引入文件夾中全部文件

你是否是曾經嘗試過下面的代碼卻發現不起做用？

require('./behaviors/*')  /* 看似很正確 */

事實上，你應該使用require.context。

// http://stackoverflow.com/a/30652110/873870
function requireAll (r) { r.keys().forEach(r) }

requireAll(require.context('./behaviors/', true, /\.js$/))

參考連接: require.context

清除extract-text-webpack-plugin日誌

若是你在使用extract-text-webpack-plugin時看過下面的調試日誌：

Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

你可使用stats: { children: false }來關閉它：

/* webpack.config.js */
stats: {
  children: false,
},

參考連接: extract-text-webpack-plugin#35

總結

以上就是rstacruz總結的13條關於webpack的建議，這幾乎是全部項目都用獲得的Webpack配置技巧吧~