面试题：Webpack与Babel集成相关问题

核心依赖

@babel/core：Babel 的核心编译器，负责将代码进行转换。
@babel/preset - env：一个智能预设，允许你使用最新的 JavaScript 语法，而无需明确指定每个插件。它会根据目标运行环境，自动确定需要转换的语法。
babel - loader：Webpack 和 Babel 之间的桥梁，使 Webpack 能够使用 Babel 处理 JavaScript 文件。

基本配置步骤

安装依赖：通过 npm 或 yarn 安装上述提到的核心依赖，例如 npm install --save - dev @babel/core @babel/preset - env babel - loader。
配置Webpack：在 Webpack 配置文件（通常是 webpack.config.js）中，在 module.rules 数组里添加一个规则来处理 JavaScript 文件，示例如下：

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

这里 test 指定匹配 JavaScript 文件，exclude 排除 node_modules 目录下的文件，use 部分指定使用 babel - loader 并配置 @babel/preset - env 预设。 3. 配置 Babel：虽然在 Webpack 配置中配置了 @babel/preset - env，也可以选择在项目根目录创建 .babelrc 文件或 babel.config.js 文件进行更详细的 Babel 配置。例如，.babelrc 文件内容可以如下：

{
    "presets": ["@babel/preset - env"]
}

这种配置方式可以与 Webpack 中的配置相互补充，进一步定制 Babel 的转换行为。

星途面试题库

面试题：Webpack与Babel集成相关问题

知识考点

面试题答案

核心依赖

基本配置步骤