[译]Webpack 2 Tree Shaking配置

原文

Tree Shaking是一个针对ES6以上代码的清楚死代码的算法，也是Webpack 2最被期待的特性之一。通过清除未使用的ES6引用，Webpack能更助于压缩过程从而得到比之前更小的文件体积。

Webpack 2简单应用代码已更新为支持[Webpack2.2]，React (v15.4)以及Babel。

Tree shaking最终得到的文件只会包含你引用的脚本。那些不被引用的则不会出现在最终文件中。

如下示例代码，我将展示新的Webpack 2配置将一个已经优化过的Webpack1项目再减少28%的大小。

放弃CommonJS，拥抱原生Imports

Webpack2目前能够直接解析原生import，而不用转换为CommonJS模块。这一点极其重要，如果你使用CommonJS暴露模块会导致引用有效，这意味着你在export声明中的一切都会被包含于最终的构建文件中。

为了压缩体积，你需要微调一下.babelrc配置。你需要使用babel-preset-es2015-native-modules来替代先前的es2015。这个配置控制在Babel编译的过程中跳过CommonJS模块转换的步骤。

使用npm安装：

npm i babel-preset-es2015-native-modules --save-dev

新的.babelrc文件：

{
  “presets”: [“es2015-native-modules”]
}

如果你使用了React：

{
  “presets”: [“es2015-native-modules”, “react”]
}

现在你搞定了Babel配置。本质上，你已经完成了Webpack2中tree shaking的所有工作。

所以现在让我们谈谈Webpack2的一些重要更新，以便帮到那些想从Webpack1迁移到Webpack2的人。

Webpack1迁移到Webpack2

Tree shaking是Webpack2开箱即用的功能。如果你现在有一个项目，是时候改进一些旧的配置。也许，你维护的可能是一个使用Webpack1的子项目。让我们来回顾一些在你更新配置时需要注意的突破性的变化。

1.Loader配置

在你定义loader配置时有一些小改变。之前的类GET语法被换成了JSON形式的声明。

让我们看看一个Webpack 1.x的例子：

loaders: [{
  test: /\.html$/,
  loader: 'file?name=[name].[ext]'
}]

同样的配置在Webpack 2.x会变成这样

loaders: [{
  test: /\.html$/,
  loader: 'file',
  query: {
    name: '[name].[ext]'
  }
}]

注意现在配置项以键值对的形式存在query参数重（译注：现在更提倡使用options）

2.Resolver

Webpack 2中,resolve.root，resolve.fallback， resolve.modulesDirectories这些选项被整合进resolve.modules。以下就是在Webpack 2中解析文件与模块地址的例子：

resolve: {
  modules: [
     path.resolve('./client'), 
     'node_modules'
  ]
}

你可以指定一些列modules名单，但别忘了node_modules与npm dependencies是无法加载的。

3.Uglify插件的变化

UglifyJsPlugin不再压缩'loader'，不推荐使用这种调试选项。这一功能被移入另一插件LoaderOptionsPlugin之中：

new webpack.LoaderOptionsPlugin({
  minimize: true,
  debug: false
}),

4.其他变化

强烈推荐Tobias Koppers aka Sokra的webpack 2新功能

实例

可以参考React + Redux + Webpack 2构建app示例，其中包含了将你项目变得更小的所有重要的配置。与同样但使用Webpack1的示例，能较少28%的文件体积。