基于npm与Angular升级Webpack遇到的问题求助

我正在升级一个有10年历史的Node/Angular应用，目前编译已通过无报错，但遇到以下几个问题：

问题1：无法生成独立的app.css文件 #

旧版Webpack 1.15.0使用ExtractTextPlugin会在/dist目录生成app.css，现在升级到Webpack5.94.0后改用MiniCssExtractPlugin，却无法生成对应的CSS文件：

• 若在plugins中使用new MiniCssExtractPlugin("app.css")，编译直接报错
• 省略参数用new MiniCssExtractPlugin()时，编译能完成，但/dist下没有生成app.css

当前webpack配置中处理CSS的规则：

{
  test: /\.css$/i,
  use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
  test: /\.less$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "less-loader",
      options: {
        lessOptions: {
          // javascriptEnabled: true,
        },
      }, 
    },
  ],
}

问题2：Vendor Bundle生成与加载异常 #

旧版使用webpack.optimize.CommonsChunkPlugin生成vendor.bundle.js，配置如下：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor', filename: 'vendor.bundle.js',
  chunks: ['app'],
  minChunks: function(module, count) {
    return module.resource && module.resource.indexOf(clientRoot) === -1;
  }
})

但Webpack5中这段代码报错：

TypeError: webpack.optimize.CommonsChunkPlugin is not a constructor
    at Object.<anonymous (/Users/pmr906_1/venv/TCangular/tc/public/webpack.js:125:5)

我尝试手动指定entry来生成vendor.bundle.js：

entry: {
  app: path.join(clientRoot, 'app/boot.js'),
  vendor: path.join(clientRoot, 'app/app.component.js'),
},
output: {
  path: path.join(clientRoot, 'dist'),
  filename: '[name].bundle.js',
  devtoolModuleFilenameTemplate(info) {
   return 'file:///${info.absoluteResourcePath.replace(/\\/g, '/')}';
 },
}

虽然成功生成vendor.bundle.js，但页面中的<tc-app>标签无法触发app.component.js的逻辑（该文件已打包进vendor.bundle.js），app.html模板也无法加载，旧版中这个标签会触发vendor.bundle.js的代码完成后续加载。

问题3：Mongoose模块加载错误 #

查看浏览器控制台发现，代码中Mongoose = require('mongoose')这一行引发模块读取错误，后续依赖该模块的多个模块也加载失败。我已经将旧版mongo-connect替换为新版connect-mongo，但问题仍未解决。

当前完整webpack.config.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
  , MiniCssExtractPlugin = require("mini-css-extract-plugin")
;

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,
  mode: "development",
  entry: {
    app: path.join(clientRoot, 'app/boot.js'),
    vendor: path.join(clientRoot, 'app/app.component.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: {
    rules: [
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /\.jpg(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
    //          javascriptEnabled: true,
              },
            }, 
          },
        ],
      },
    ], /*,
    noParse: [
    ] */
  },
  resolve: {
 /*   root: [clientRoot], */
    modules: [clientRoot, 'web_modules', 'node_modules', 'bower_components', ],
    fallback: {
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": false,
        "http": false,
        "https": false,
        "stream": false,
        "crypto": false,
        "crypto-browserify": false, //if you want to use this module also don't forget npm i crypto-browserify 
      },
    alias: {
      bower: bowerRoot,
      node: nodeRoot,
    },
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', filename: 'vendor.bundle.js',
      chunks: ['app'],
      minChunks: function(module, count) {
        return module.resource && module.resource.indexOf(clientRoot) === -1;
      }
      }), 
     new MiniCssExtractPlugin(), 
  ],
  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);
}

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