面试题：Webpack与Babel集成时，如何解决ES6+语法在低版本浏览器不兼容问题？

Question

在Webpack与Babel集成的项目中，已知项目代码使用了ES6的箭头函数等语法，目标是要兼容IE11等低版本浏览器。请描述实现此兼容的主要配置步骤，包括在Webpack和Babel配置文件中分别需要做哪些设置。

Answer 1

Webpack配置

1. 安装相关loader： 在项目根目录下执行npm install babel-loader @babel/core @babel/preset-env --save-dev。babel-loader用于在Webpack中加载Babel，@babel/core是Babel的核心库，@babel/preset-env用于根据目标环境将ES6+语法转换为ES5。
2. 配置Webpack： 在webpack.config.js中，找到module.rules数组，添加如下配置：

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

test指定匹配.js文件，exclude排除node_modules目录，use中指定babel-loader，并在options中配置presets使用@babel/preset-env。

Babel配置

1. 创建Babel配置文件： 在项目根目录下创建.babelrc文件（也可以使用babel.config.js）。
2. 配置Babel： 在.babelrc文件中添加如下内容：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["ie >= 11"]
                }
            }
        ]
    ]
}

这里通过@babel/preset-env的targets选项指定目标浏览器为IE11及以上版本，Babel会根据此配置将代码转换为IE11能识别的ES5语法。