摘要：只在中有效你的文件在開(kāi)發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時(shí)看過(guò)下面的調(diào)試日志你可以使用來(lái)關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議，這幾乎是所有項(xiàng)目都用得到的配置技巧吧

原文地址  
本文是作者對(duì)自己所學(xué)的webpack技巧的總結(jié)，在沒(méi)有指定特殊情況下適用于webpack 3.0版本。

使用webpack --progress --colors這樣可以讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色。

在生產(chǎn)環(huán)境中構(gòu)建項(xiàng)目時(shí)，使用

webpack -p

這行代碼在webpack 2中還會(huì)自動(dòng)設(shè)置

process.env.NODE_ENV === "production"

通過(guò)設(shè)置output屬性為[name].js來(lái)導(dǎo)出復(fù)數(shù)包。下面的例子將會(huì)生成a.js和b.js。

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

擔(dān)心會(huì)重復(fù)打包？使用 CommonsChunkPlugin 來(lái)把通用部分移入一個(gè)新的輸出文件中。

plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]

使用CommonsChunkPlugin將第三方代碼移動(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")
  ]
}

讓我們來(lái)看看，CommonsChunkPlugin是怎么起作用的:

我們指定了一個(gè)叫vendor的入口，并且它加載了jquery等第三方庫(kù)。

CommonsChunkPlugin識(shí)別到這些第三方庫(kù)在app.js中出現(xiàn)重復(fù)，便將app.js中的第三方庫(kù)都移除。

在vendor.js中，CommonsChunkPlugin還加入了webpack的運(yùn)行時(shí)間。

參考鏈接：Code splitting

最好的資源映射選項(xiàng)是cheap-module-eval-source-map。當(dāng)使用chrome/firefox的開(kāi)發(fā)者工具時(shí)，它會(huì)顯示原始資源文件。另一方面，它比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開(kāi)發(fā)者工具中顯示為webpack:///foo.js?a93h。如果我們希望文件名顯示得更清晰呢，比如說(shuō)webpack:///path/to/foo.js？

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

參考鏈接: devtool documentation

在webpack 2-3版本中，最好的資源映射選項(xiàng)是cheap-module-source-map，因?yàn)閏heap-module-eval-source-map策略已經(jīng)不能在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的資源映射會(huì)不起作用。

// 只有當(dāng)你使用extract-text-webpack-plugin時(shí)
module.exports = {
  devtool: DEBUG ? "source-map" : "hidden-source-map"
}

同樣的， 想要 webpack:///path/to/foo.js這樣清晰的路徑，我們可以寫(xiě)成下面這樣：

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

參考鏈接: devtool documentation

這是一個(gè)復(fù)雜的過(guò)程，你可以在這里找到答案。（譯者注：這篇指南目前還沒(méi)有翻譯。）

你想要某些配置只存在于開(kāi)發(fā)環(huán)境中嗎？

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中，打包你的項(xiàng)目資源時(shí)，通過(guò) env NODE_ENV=production webpack -p 來(lái)調(diào)用webpack命令。
而在webpack 2中，只要webpack -p就可以了，因?yàn)閣ebpack自動(dòng)幫你設(shè)置了NODE_ENV。

你想知道資源包中有哪些“重量級(jí)”依賴(lài)嗎？使用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，它能夠獨(dú)立于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會(huì)默認(rèn)生成一些開(kāi)發(fā)工具，而在生產(chǎn)環(huán)境中你并不需要它們。使用EnvironmentPlugin來(lái)讓他們?nèi)说罋绨?。這大概會(huì)節(jié)約30kb左右的空間。

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

在webpack 1中，使用env NODE_ENV=production webpack -p命令啟動(dòng)webpack來(lái)打包資源。而在webpack 2中，只要webpack -p就可以了，理由略。

參考鏈接: EnvironmentPlugin documentation

Lodash 非常有用，但是我們通常用到的只是其功能中的滄海一粟。 lodash-webpack-plugin 可以使用noop, identity或其他更簡(jiǎn)化的選項(xiàng)來(lái)替換 feature sets，來(lái)幫助你減少lodash占用的空間。

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

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

這種方法可以幫助你省下至少10kb。如果你的項(xiàng)目中l(wèi)odash的比重很高，那你節(jié)省的資源會(huì)更多。

你是不是曾經(jīng)嘗試過(guò)下面的代碼卻發(fā)現(xiàn)不起作用？

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

事實(shí)上，你應(yīng)該使用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時(shí)看過(guò)下面的調(diào)試日志：

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 }來(lái)關(guān)閉它：

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

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

以上就是rstacruz總結(jié)的13條關(guān)于webpack的建議，這幾乎是所有項(xiàng)目都用得到的Webpack配置技巧吧~