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

【问题标题】：Webpack@5 + angularJS + babel: Module parse failed: Unexpected token (2115:9), no loaders are configured to process this fileWebpack@5 + angularJS + babel: Module parse failed: Unexpected token (2115:9), 没有配置加载器来处理这个文件
【发布时间】：2021-09-25 14:32:32
【问题描述】：

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

我没有使用 typescript，它是一个简单的单页网站，该网站已经上线并使用昨天的生产构建脚本运行。但是今天，在运行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

【问题讨论】：

标签： javascript angularjs webpack babel-loader

【解决方案1】：

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

所以我真的不知道是什么问题，可能是某个模块出现了问题。

【讨论】：