Webpack 5 提取文本插件子组件虽然未使用但已被调用

Question

我正在更新已有 10 年历史的 Node 网站，使其与最新软件保持一致，并（特别是）解决任何可能的安全问题。这意味着实现网页 5，该网页（除其他外）不再使用 webpack 版本 1 至 3 中使用的 extract-text-webpack-plugin。然而，尽管删除了对“extract-text-webpack-plugin”的所有引用我的项目根目录中的 main webpack.js （并检查项目中其他任何地方是否没有引用它，例如在 node-modules/webpack 中调用的所有文件）当我尝试运行我的网站时，我收到此错误：

/用户/pmr906_1/venv/TCangular/tc/node_modules/webpack/lib/webpack.js |tc-client | - /Users/pmr906_1/venv/TCangular/tc/public/webpack.js |tc-client |子 extract-text-webpack-plugin: |tc-clien |
|tc-client | 错误于 ./~/less-loader/stringify.loader.js!./~/bootstrap/less/bootstrap.less |tc-client | 模块构建失败：错误：ENOENT：没有这样的文件或 目录，打开 '/Users/pmr906_1/venv/TCangular/tc/node_modules/bootstrap/less/bootstrap.less' |tc-client | @ ./~/css-loader！./~/less-loader！./public/app/app.less

因此我的问题是：“Child extract-text-webpack-plugin”的调用来自哪里？此处指定的两个文件中都没有引用“extract-text-webpack-plugin”。

救命！

这是我的应用程序的核心代码，到目前为止：

package.json：

{
  "name": "tc",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "pm2 startOrReload pm2.json",
    "prod": "pm2 startOrReload pm2.json --env production",
    "logs": "pm2 logs",
    "test": "node --use_strict $(npm bin)/jasmine"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "async": "^3.2.6",
    "base64url": "^3.0.1",
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "bootstrap": "^5.3.3",
    "bson": "^6.8.0",
    "codemirror": "^6.0.1"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.9.1",
    "webpack": "^5.94.0"
  }
}

还有 webpackconfig.js （包括许多对尚未添加到项目中的插件等的引用，但这不应导致出现错误）：

var _ = require('lodash')
  , webpack = require('webpack')
  , ResolverPlugin = webpack.ResolverPlugin
  , ProvidePlugin = webpack.ProvidePlugin
  , IgnorePlugin = webpack.IgnorePlugin
//  , ExtractTextPlugin = require("extract-text-webpack-plugin")
  , path = require('path')
  , clientRoot = path.resolve(__dirname)
  , bowerRoot = path.resolve(clientRoot, '..', 'bower_components')
  , nodeRoot = path.resolve(clientRoot, '..', 'node_modules')
  , devtool = 'eval-source-map'
  , debug = true
;

switch (process.env.NODE_ENV) {
  case 'production':
    devtool = '#source-map';
    debug = false;
    break;
  case 'development':
    devtool = 'eval-source-map';
    debug = true;
    break;
}

var config = {
  context: clientRoot,
  entry: {
    app: path.join(clientRoot, 'app/boot.js'),
    t: path.join(clientRoot, 'app/t.js'),
  },
  output: {
    path: path.join(clientRoot, 'dist'),
    filename: '[name].bundle.js',
    devtoolModuleFilenameTemplate(info) {
     return `file:///${info.absoluteResourcePath.replace(/\\/g, '/')}`;
   },
  },
  externals: {
    jquery: 'jQuery',
    rxjs: 'Rx',
    lodash: '_',
    bson: 'bson',
    'codemirror/lib/codemirror': 'CodeMirror',
    'codemirror/mode/xml/xml': false,
  },
  module: {
    loaders: [
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /\.jpg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
      },
      {
        test: /\.css$/, 
//        loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
        //loader: 'style!css'
      },
      {
        test: /\.less$/,
        //loader: 'style!css!less?sourceMap'
 //       loader: ExtractTextPlugin.extract(
 //         "style-loader", "css-loader!less-loader"),
      },
    ],
    noParse: [
    ]
  },
  resolve: {
    root: [clientRoot],
    modulesDirectories: ['web_modules', 'node_modules', 'bower_components', ],
    alias: {
      bower: bowerRoot,
      node: nodeRoot,
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new ResolverPlugin(new ResolverPlugin.DirectoryDescriptionFilePlugin(
      'bower.json', ['main']
    )), 
    // prevent webpack accident include server security information
    new IgnorePlugin(new RegExp('config\/production.*')),
//    new ExtractTextPlugin("app.css"),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', filename: 'vendor.bundle.js',
      chunks: ['app'],
      minChunks: function(module, count) {
        return module.resource && module.resource.indexOf(clientRoot) === -1;
      }
    }),

  ],
  debug: debug,
  devtool: devtool,
};

var compiler = webpack(config);

if (process.env.NODE_ENV === 'development') {
  compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
} else {
 compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
  //compiler.run(handleError);
}

function handleError(err, stats) {
  console.log(stats.toString({
    colors: true,
    cached: false,
  }));
}

Answer 1

向大家致歉！无奈之下，我重新启动了电脑，问题就消失了。似乎 npm 以某种方式缓存了旧版本的 webpack，因此生成了错误。哦，好吧。