需安装babel-loader、@babel/core、@babel/preset-env等依赖，配置babel.config.js指定targets和useBuiltIns，webpack.config.js中rules添加babel-loader并启用cacheDirectory缓存。

要在 JavaScript 项目中用 Webpack 通过 babel-loader 编译高级语法（比如箭头函数、解构、可选链、顶层 await 等），核心是配置好 Babel 的转译规则，并让 Webpack 在打包时调用它处理 .js 文件。

安装必要依赖

先装 Webpack 相关基础包和 Babel 工具链：

• npm install --save-dev webpack webpack-cli
• npm install --save-dev babel-loader @babel/core
• npm install --save-dev @babel/preset-env（最常用，按目标环境自动决定转译内容）
• 可选：@babel/preset-react（如果写 React）、@babel/plugin-proposal-class-properties（类属性等实验特性）

配置 babel.config.js（推荐方式）

在项目根目录新建 babel.config.js，内容如下：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '79',
          edge: '18',
          firefox: '68',
          safari: '12'
        },
        useBuiltIns: 'usage', // 按需引入 polyfill
        corejs: 3
      }
    ]
  ]
};

这个配置会根据你指定的浏览器版本，只转译那些不被支持的语法，并自动注入所需的 core-js 垫片。

立即学习“Java免费学习笔记（深入）”；

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

配置 webpack.config.js 加载器规则

在 webpack.config.js 的 module.rules 中添加：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true, // 启用缓存，提升二次构建速度
          cacheCompression: false
        }
      }
    }
  ]
}

注意：exclude: /node_modules/ 很关键，避免重复编译第三方模块，也防止出错。

验证是否生效

写一段含新语法的代码测试，例如：

// src/index.js
const arr = [1, 2, 3];
const doubled = arr.map((x) => x * 2);
console.log(doubled?.[0]); // 可选链，在旧浏览器不支持

运行 npx webpack，查看输出的 bundle 文件——你会发现箭头函数已转为普通 function，可选链也被降级为安全判断逻辑。

如果想看 Babel 具体做了什么，可单独用 npx babel src/index.js 测试转译结果。