Webpack@5 + angularJS + babel: Module parse failed: Unexpected token (2115:9)，没有配置加载器来处理这个文件

如何解决Webpack@5 + angularJS + babel: Module parse failed: Unexpected token (2115:9)，没有配置加载器来处理这个文件

直到今天，构建都是成功的，没有任何错误，只有关于构建大小的警告（我正在使用 socket.io-client 和其他一些没有问题的包）。我用我的简单配置完成了许多成功的构建。

我没有使用打字稿，它是一个简单的单页网站，该网站已上线并使用昨天的生产构建脚本运行。但是今天，在运行 npm update（没有更新任何内容）之后，我无法进行任何更改，因为无论我尝试修复什么构建都失败了。

感谢任何帮助。

我收到以下错误：

ERROR in ./node_modules/angular/angular.js 2115:9
Module parse Failed: Unexpected token (2115:9)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  * throw error if the argument is falsy.
|  */
> function assertArg(arg,name,reason) {
|   if (!arg) {
|     throw ngminerr('areq','Argument \'{0}\' is {1}',(name || '?'),(reason || 'required'));
 @ ./node_modules/angular/index.js 1:0-20
 @ ./resources/assets/app/index.js 15:14-32

webpack 5.45.0 compiled with 1 error and 1 warning in 38636 ms

错误由 babel-loader 生成，使用版本 8.2.2：

"node_modules/babel-loader": {
  "version": "8.2.2","resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz","integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==","dev": true,"dependencies": {
    "find-cache-dir": "^3.3.1","loader-utils": "^1.4.0","make-dir": "^3.1.0","schema-utils": "^2.6.5"
  },"engines": {
    "node": ">= 8.9"
  },"peerDependencies": {
    "@babel/core": "^7.0.0","webpack": ">=2"
  }
},

我的webpack.common.js：

const config = {
  resolve: {
    modules: [path.resolve(__dirname,'resources/assets'),'node_modules'],},entry: {
    app: './resources/assets/app/index.js',output: {
    // ...
  },module: {
    rules: [
      {
        test: /\.js$/,exclude: /node_modules/,use: {
          loader: 'babel-loader',]
  },plugins: [
    new MiniCssExtractPlugin(),new WebpackBuildNotifierPlugin(
      {
        title: "Build Complete!",sound: true,}
    ),],optimization: {
    sideEffects: true,usedExports: false,removeEmptyChunks: true,concatenateModules: true,mangleExports: 'size',}
};
module.exports = config;

然后我在 webpack.dev.js 中使用该配置：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge( common,{
  mode: 'development',devtool: 'inline-source-map',});

运行开发构建：

webpack --mode development --watch --config webpack.dev.js

根据 package-lock.json 我的角度版本是 1.8.2：

"node_modules/angular": {
  "version": "1.8.2","resolved": "https://registry.npmjs.org/angular/-/angular-1.8.2.tgz","integrity": "sha512-IauMOej2xEe7/7Ennahkbb5qd/HFADiNuLSESz9Q27inmi32zB0lnAsFeLEWcox3Gd1F6YhNd1CP7/9IukJ0Gw=="
},

我的 npm 和 node 版本：

$ npm -v
7.19.1

$ node -v
v16.5.0

解决方法

终于解决了这个问题。最后我删除了 node_modules 文件夹，从 package.json 中删除了所有不必要的包，做了一个干净的 npm install 并且构建现在正在工作。我没有对 webpack 配置进行任何更改。

所以我真的不知道是什么问题，可能是某个模块在起作用。