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

  1. 安装依赖:首先确保你的项目中已经安装了Babel相关的依赖,包括@babel/core@babel/preset-envbabel-loader。你可以使用以下命令安装它们:
npm install --save-dev @babel/core @babel/preset-env babel-loader
  1. 配置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']
          }
        }
      }
    ]
  }
};
  1. 配置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+的语法和新特性了。