webpack已配置topLevelAwait仍报顶层await未启用错误排查

你配置的experiments.topLevelAwait: true本身是正确的，报错来自两处webpack配置错误：

• module规则里的test字段给正则加了引号，变成了普通字符串，无法正确匹配.js、.jsx后缀的文件
• 给JS文件配置了raw-loader，这个loader只会把文件内容作为纯字符串返回，完全不会解析JS语法、处理top-level-await等新特性，webpack拿到未经语法处理的原始源码，就会抛出特性未开启的报错

1. 移除错误的raw-loader配置。如果你不需要做ES版本转译，直接清空module.rules里的错误规则即可，最小可用配置如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: []
  },
  devtool: 'eval-source-map',
  experiments: {
    topLevelAwait: true,
  },
};

2. 如果后续需要给JS/JSX文件配置转译loader（比如babel-loader），注意test字段要直接写正则字面量，不要套引号，正确写法参考：

rules: [
  {
    test: /\.js|\.jsx$/, // 不要给正则加单/双引号
    exclude: /node_modules/,
    use: 'babel-loader'
  }
]

3. 保存配置后重启构建流程，top-level-await语法即可被webpack正常识别。

内容的提问来源于stack exchange，提问作者Sarah