如何在Webpack中使用ES6+的语法和新特性，例如ES Modules、Async&Await等！

要在Webpack中使用ES6+的语法和新特性，你需要进行以下配置：

1. 安装依赖：首先确保你的项目中已经安装了Babel相关的依赖，包括@babel/core、@babel/preset-env和babel-loader。你可以使用以下命令安装它们：

npm install --save-dev @babel/core @babel/preset-env babel-loader

2. 配置Webpack：在Webpack的配置文件中，添加一个规则来处理JavaScript文件。在这个规则中，将babel-loader应用于所有以.js为扩展名的文件。你还需要指定@babel/preset-env作为Babel的预设：

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

3. 配置Babel：在项目的根目录下创建一个名为.babelrc的文件，并在其中指定Babel的配置。你可以使用以下配置来启用ES Modules和Async/Await的支持：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

上述配置中的useBuiltIns选项将根据代码中使用的特性自动导入必要的Polyfill，corejs选项指定所使用的Core.js版本。

完成上述配置后，Webpack将使用Babel来转译你的JavaScript代码，使其兼容目标环境。你就可以在Webpack中使用ES6+的语法和新特性了。

扩展阅读

• babel-loader