Webpack5构建时所有JS文件报loader后缀省略错误如何修复？

我当前使用Webpack 5.73与Babel-loader 8.2.5版本。
我的package.json配置如下：

"dependencies": {
  "webpack": "^5.73.0",
  "webpack-cli": "^4.9.2",
  "@babel/core": "^7.18.2",
  "@babel/preset-env": "^7.18.2",
  "@babel/preset-react": "^7.17.12",
  "babel-polyfill": "^6.26.0",
  "babel-loader": "^8.2.5",
  "css-loader": "^0.28.11",
  "sass-loader": "^13.0.0",
  "style-loader": "^0.20.3",
  "text-loader": "^0.0.1",
}

在我的webpack.config.js文件中，模块规则配置如下：

module: {
  rules: [
    // 使用babel将ES2015+语法转译为兼容版本JS
    {
      test: /\.js$/,
      include: path.resolve(__dirname, "Game"),
      exclude: /(Game\/lib|userFiles)/,
      use: {
        loader: 'babel-loader',
        options: {
          // presets按逆序执行
          presets: ["@babel/preset-env"],
          //cacheDirectory: true
        }
      }
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
      test: /\.(woff2?|svg)$/,
      type: 'asset'
    },
    {
      test: /\.(ttf|eot)$/,
      type: 'asset/resource'
    },
  ]
}

执行npm run webpack命令时，项目内所有.js文件都会抛出如下错误：

ERROR in ./Game/gameViews/MainView.js 4:0-48
Module not found: Error: Can't resolve 'text' in 'G:\GameHub\Project\Game\gameViews'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'text-loader' instead of 'text',

已尝试删除package-lock.json与node_modules目录后重新安装全部依赖，运行webpack仍出现相同报错，求可行的解决方法。

报错核心原因是Webpack 5不再支持省略loader的-loader后缀引用，你的webpack配置文件里没有直接写text作为loader的规则，问题出在业务代码里的内联loader引用：

• 全局搜索项目中（尤其是报错提示的Game/gameViews目录下的.js文件）所有类似import xxx from 'text!xxx.txt'、require('text!xxx路径')的写法
• 把所有内联引用里的text!替换为text-loader!即可，示例：

  // 错误写法
  import fileContent from 'text!../config/readme.txt'
  // 修正后写法
  import fileContent from 'text-loader!../config/readme.txt'
  

如果不想批量修改代码里的内联loader写法，也可以在webpack.config.js里添加配置兼容省略后缀的loader引用，该方式不推荐，后续版本升级容易出现兼容问题：

module.exports = {
  // 其余原有配置保持不变
  resolveLoader: {
    moduleExtensions: ['-loader']
  }
}

另外两个需要注意的配置隐患：

• 你安装的css-loader@0.28.11、style-loader@0.20.3版本过低，和Webpack 5、sass-loader@13存在兼容问题，后续打包样式大概率会报错，建议升级到和Webpack 5匹配的版本
• babel-polyfill已经在Babel 7中被废弃，建议替换为core-js配合@babel/preset-env的useBuiltIns配置做polyfill注入

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