用 ES6 编写 Webpack 的配置文件

概述

我最近在整理一个 Ionic + Webpack 的项目模板，因为项目代码都是 ES6 的，所以我也想在其他地方也用 ES6 。其中一个地方就是 webpack.config.js 。目前有三种方法可以做到这一点，不过各有利弊。

方法 1：升级到 Node.js 4

Node.js 4 合并了 io.js ，所以自然带有所有 io.js 的特性，其中就包括部分 ES6 特性的支持。不过目前的版本 (4.2.1) 只支持部分特性，尤其是以下几个很常用的都不支持：

1. 函数默认值

2. 解构和其相关的所有功能

3. ES6 模块

具体支持程度可看 这里 。Babel 达到了 71% ，Node.js 4 达到了 53% ，Node.js 5 也只达到了 59% 。真是不容乐观。

总结：这个方法适合依赖少数 ES6 特性，又确定使用 Node.js 4 及以上版本的人，不能算是大众方案。

方法 2：webpack.config.babel.js

这个最简单，把 webpack.config.js 改名成 webpack.config.babel.js 就行。一切命令照旧。Webpack 在执行时会先用 Babel 把配置文件转成 ES5 代码再继续处理。一切 Babel 支持的语言特性都可以用。

这是一个 Webpack 支持，但文档里完全没有提到的特性 （应该马上就会加上）。只要你把配置文件命名成 webpack.config.[loader].js ，Webpack 就会用相应的 loader 去转换一遍配置文件。所以要使用这个方法，你需要安装 babel-loader 和 babel-core 两个包。记住你不需要完整的 babel 包。

理论上这种做法支持任何 loader ，所以你也可以用 CoffeeScript 或者其他语言去写，只要有相应的 loader 就行。

这个方法还有个好处，如果你在 webpack.config.babel.js 里 import 了其他文件，那个文件也会被 Babel 编译。比如：

// webpack.config.babel.js

// 这个文件也可以用 ES6 写
import config from './some-config'

export default {
  // webpack config
}

不过，如果你打算自己写脚本去加载 Webpack 的配置，这个方法就不管用了。

总结：这个方法适合那些不在乎 Node.js 版本，只使用 webpack 和 webpack-dev-server 命令，不打算自己写脚本或过多折腾，但想使用完整的 ES6 特性的人。

方法 3：用 babel-node

这是我在 这个问题 中看到的。其中提问者提到的 React Starter Kit 挺有意思。它没改 webpack.config.js 的文件名，但配置文件和各种脚本都是完全的 ES6 语法。这是怎么做到的呢？

关键就在于 babel-node 。这是 Babel 提供的一个命令行工具，你可以用它代替 node 去执行文件。文件会被 Babel 编译后再交给 node 命令执行。

让我们看看 React Starter Kit 如何利用这一点的。首先它用 package.json 里定义的 scripts 来代替 webpack 命令。可以看到它完全使用了 babel-node 命令代替 node 。比如：

{
  "scripts": {
    "bundle": "babel-node tools/run bundle",
    ...
  }
}

这样就可以用 npm run bundle 来执行相应的任务了。这个命令会会先调用 tools/run.js，然后调用 tools/bundle.js，然后加载 tools/webpack.config.js 。整个流程中的所有文件都是用 ES6 和 ES7 语法写的，非常整洁漂亮。

总结：这个方法适合需要自己写脚本并且想用完整的 ES6 语法的人。不过 babel-node 因为要编译，而且换成结果会存在内存中，所以命令执行时间会比单纯使用 node 要长（主要是启动时间）。这点就见仁见智了。记住不要在生产环境下用 babel-node 。

总结

得益于 Babel ，ES6 几乎已经是现在的标配了。在不折腾的情况下用用 ES6 是大家都能接受的结果。所以我推荐大部分人用方法 2 。但如果需要写点 npm run xxx 的脚本，难免又会觉得不能用 ES6 有点不一致。这种情况我觉得要么就都用 ES6 ，要么就干
脆不用。因为我个人觉得一致性比用不用 ES6 更加重要。build 脚本勉强也算是后端的一部分，而我们不能强求所有后端代码都写成 ES6 的（比如自己写个 server）。

参考资料

Allow webpack.config.js to be written in ES6
ES6 Compatible Table
StackOverflow - How to use ES6 in Webpack config
React Starter Kit
Babel CLI