[译]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%的文件体积。