如何配置Webpack编译ES6代码？Webpack 2.x默认编译ES5怎么修改？

嘿，我刚好对Webpack 2.x的配置熟得很，先帮你澄清一个小误解：Webpack 2.x本身不会默认把代码编译成ES5——它只是原生支持ES模块（import/export）的打包，但不会主动转译箭头函数、let/const这类ES6语法。如果你现在输出的是ES5，大概率是项目里已经悄悄配置了Babel之类的编译工具。

下面分两种常见场景给你说具体配置方法：

场景1：让Webpack编译ES6源码到ES5（适配旧浏览器） #

这是最常用的需求，需要借助Babel来转译ES6语法，步骤如下：

1. 安装必要依赖 #

先装Babel核心库、Webpack对应的loader，以及语法预设（告诉Babel要转译哪些特性）：

npm install --save-dev babel-core@6 babel-loader@7 babel-preset-env@1

注：Webpack 2.x只兼容babel-loader@7及以下版本，所以要指定版本避免兼容问题。

2. 修改Webpack配置文件 #

在webpack.config.js里添加模块规则，让Webpack对.js文件启用babel-loader：

module.exports = {
  // 其他基础配置（入口、输出等）...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 跳过第三方库，提升编译速度
        use: 'babel-loader'
      }
    ]
  }
};

3. 创建Babel配置文件 #

在项目根目录新建.babelrc文件，配置转译规则：

{
  "presets": [
    ["env", {
      "modules": false, // 关闭Babel对ES模块的转换，让Webpack自己做Tree Shaking
      "targets": {
        "browsers": ["last 2 versions", "ie >= 10"] // 按需设置要兼容的浏览器
      }
    }]
  ]
}

配置完这些，Webpack就会通过Babel把你的ES6源码转译成ES5，打包后就能在旧浏览器里运行了。

场景2：保留ES6语法输出（不转译成ES5） #

如果你的项目现在已经配置了Babel导致输出ES5，想要改成直接输出ES6代码，有两种方式：

方法1：调整Babel预设 #

把.babelrc里的目标浏览器改成只支持ES6的版本，这样Babel只会转译极少数不兼容的特性：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["chrome >= 60", "firefox >= 55", "safari >= 11"]
      }
    }]
  ]
}

方法2：完全移除Babel转译 #

如果不需要任何语法转换，直接删掉webpack.config.js里的babel-loader规则，同时删除.babelrc文件，Webpack就会原样打包你的ES6代码（只处理模块打包，不修改语法本身）。

内容的提问来源于stack exchange，提问作者dakiesse