大多数项目中会用到的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") ]

使用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

最好的资源映射选项是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版本中，最好的资源映射选项是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

这是一个复杂的过程，你可以在这里找到答案。（译者注：这篇指南目前还没有翻译。）

你想要某些配置只存在于开发环境中吗？

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会默认生成一些开发工具，而在生产环境中你并不需要它们。使用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-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时看过下面的调试日志：

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配置技巧吧~