Webpack无法编译ES6文件的原因分析

在项目中使用了Webpack与ES6技术，但经常出现ES6文件没有编译的错误，如下：

main.js:62 Uncaught SyntaxError: Unexpected token export

浏览器提示export关键无法识别，显然ES文件没有被编译，依次诊断的顺序如下：

1. 确认是否存在.babelrc

如果没有在babel-loader里明确指定ES6的子集，那么系统根路径下必须包含.babelrc文件，其内容如下所示：

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": true
}

需要注意的是，务必保证相关的包都安装完成，如babel-preset-stage-2、babel-plugin-transform-runtime。

2. 确认loader配置的路径是否正确

在babel-loader的配置中，include的配置路径必须是绝对路径，如下：

{
    test: /\.es6$/,
    loader: 'babel-loader',
    //  这里必须是绝对路径
    // 错误的写法 include: './es6'
    include:path.resolve(__dirname, './es6')
}

3. 确认ES6文件的后缀名是否匹配

确认ES6文件的后缀名与babel-loader的配置是否匹配，假如是以上的写法，ES6文件的后缀名必须是es6，否则将不会编译。