面试题：Webpack中如何配置Babel实现ES6转译

Question

请描述在Webpack项目里，使用Babel将ES6代码转译为ES5代码的具体配置步骤，包括安装哪些必要的npm包以及如何修改webpack.config.js文件。

Answer 1

1. 安装必要的npm包：
   • @babel/core：Babel的核心转译器，用于实际的代码转换。使用命令npm install --save -dev @babel/core安装。
   • @babel/preset - env：一个智能预设，允许你指定目标环境，Babel会根据目标环境将ES6+代码转译为ES5等低版本代码。使用命令npm install --save -dev @babel/preset - env安装。
   • babel - loader：Webpack与Babel之间的桥梁，使Webpack能够识别和处理Babel转译。使用命令npm install --save -dev babel - loader安装。
2. 修改webpack.config.js文件： 在module.rules数组中添加如下配置：

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

上述配置中：

• test指定匹配所有.js文件。
• exclude指定排除node_modules目录，因为一般不需要对node_modules里的代码进行转译。
• loader指定使用babel - loader。
• options.presets指定使用@babel/preset - env预设进行转译。