面试题：Webpack与Babel集成的关键步骤

Question

请描述Webpack与Babel集成时，需要安装哪些核心依赖包，并简要说明在Webpack配置文件中如何配置Babel-loader以支持ES6+语法转换。

Answer 1

核心依赖包

1. @babel/core：Babel 的核心编译工具，负责将 ES6+ 代码转换为 ES5 代码。
2. @babel/preset-env：一个智能预设，允许你使用最新的 JavaScript 语法，同时自动将其转换为目标环境支持的版本。
3. babel-loader：Webpack 与 Babel 集成的桥梁，让 Webpack 能够识别和处理 Babel 编译。

Webpack 配置文件中 Babel-loader 的配置

在 Webpack 的 webpack.config.js 文件中，配置如下：

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 中指定 @babel/preset-env 预设，以开启 ES6+ 语法转换。