面试题：Webpack与Babel集成之基础配置

Question

请描述如何在Webpack项目中集成Babel，以支持ES6+语法转换。需要详细说明安装哪些依赖，以及Webpack和Babel的主要配置步骤。

Answer 1

安装依赖

1. babel-core：Babel的核心库，用于编译代码。运行npm install babel-core --save-dev 或 yarn add babel-core --dev 安装。
2. babel-loader：Webpack与Babel之间的桥梁，使Webpack能够使用Babel进行编译。通过npm install babel-loader --save-dev 或 yarn add babel-loader --dev 安装。
3. babel-preset-env：一个智能预设，允许你使用最新的JavaScript语法，同时针对不同运行环境自动转换代码。执行npm install babel-preset-env --save-dev 或 yarn add babel-preset-env --dev 安装。

Webpack配置步骤

在Webpack的配置文件（通常是webpack.config.js）中添加如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

上述配置中，test指定对.js文件进行处理，exclude排除node_modules目录（因为一般不需要转换第三方库的代码），use中指定使用babel-loader，并在options中配置使用babel-preset-env预设。

Babel配置步骤

在项目根目录下创建一个.babelrc文件（或者在package.json中配置babel字段），内容如下：

{
  "presets": ["env"]
}

这个配置文件告诉Babel使用babel-preset-env预设来进行语法转换。如果需要对babel-preset-env进行更细致的配置，比如指定目标环境等，可以在presets数组中对env进行详细配置，例如：

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["ie >= 11"]
        }
      }
    ]
  ]
}

上述配置表示只针对IE 11及以上版本进行语法转换。