webpack@5+angularjs+babel:模块解析失败:意外令牌(2115:9),未配置任何加载程序来处理此文件

wlp8pajw  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(258)

直到今天,构建还是成功的,没有任何错误,只是对构建大小发出了警告(我使用的是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',
});

运行dev build时使用:

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

根据 package-lock.json 我的Angular 是 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=="
},

我的 npmnode 版本:

$ npm -v
7.19.1

$ node -v
v16.5.0
ggazkfy8

ggazkfy81#

终于解决了这个问题。最后我搬走了 node_modules 文件夹中删除了package.json中所有不必要的包,并进行了清理 npm install 我们现在正在工作。我并没有改变这个计划 webpack 配置。
所以我真的不知道是什么问题,可能是某个模块出了问题。

相关问题