使用 npm 和 Angular 升级 Webpack

问题描述 投票：0回答：1

我正在升级旧版节点/角度应用程序（10 年前！），并且已编译所有内容，没有错误消息等。我正在服务器根目录中使用 index.html 文件夹通过以下代码启动应用程序：

<body>
  <tc-app>Loading...</tc-app>
</body>

是一段 Angular 代码。这将使用选择器“tc-app”调用 app.component 模块。这反过来会在文件“app.html”中加载一个模板，该模板又会调用更多的组件模块，每个模块都有自己的模板，如此循环。

在旧应用程序中，使用 Webpack 1.15.0，webpack 为 /dist 文件夹生成三个文件：app.bundle.js、app.css、vendor.bundle.js。使用 Webpack 5.94.0 的新应用程序愉快地生成了 app.bundle.js。但是，它不会生成 app.css。这是可以预料的：遗留应用程序使用 ExtractTextPlugin，现已弃用。但是，我尝试弄清楚如何使用替换的 MiniCssExtractPlugin 在 /dist 中生成 app.css 文件，但迄今为止失败了。包括tbe线

new MiniCssExtractPlugin("app.css"),

在 webpack.config.js 的规则部分中生成错误。省略该参数，即 new MiniCssExtractPlugin()，允许 webpack 完成，但不会在 /dist 中生成任何内容。

第二个问题是为所有角度组件生成正确的包，由遗留应用程序在vendor.bundle.js中输出。我可以使用以下代码在新文件中生成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 文件似乎失败。在旧应用程序中，标签会触发vendor.bundle.us中的代码，并使浏览器加载模板文件app.html，然后从那里继续。在新应用程序中，该标记不会调用 app.component.js。应该如此，并且 app.html 未加载。尽管 app.component.js 确实被捆绑在新的vendor.bundle.js 文件中。

在旧文件中，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;
      }

但是，在新应用程序中，此代码返回错误：

 at Module._compile (node:internal/modules/cjs/loader:1469:14)
 at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
 at Module.load (node:internal/modules/cjs/loader:1288:32)
 at Module._load (node:internal/modules/cjs/loader:1104:12)
 TypeError: webpack.optimize.CommonsChunkPlugin is not a constructor
    at Object.<anonymous (/Users/pmr906_1/venv/TCangular/tc/public/webpack.js:125:5)

这是我当前的 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);
}

更新 检查浏览器错误输出显示读取模块中此行生成的模块时出现错误：

Mongoose = require('mongoose')

随后需要此模块的其他几个模块也失败。对 mongoose 的调用出现问题。我会调查一下（猫鼬在这次升级中造成了巨大的困难）。我发现我使用的是一个非常旧的 mongo-connect 工具；我用更新的 connect-mongo 替换了它。没有变化。

javascript node.js angular npm webpack
1个回答
0
投票

问题解决了一半！原来是带线的模块

Mongoose = require('mongoose')

实际上不需要 mongoose，所以我只是剪掉那一行，按 npm start，重建 /dist 文件夹，一切都成功了！我不明白为什么其他模块能够包含这一行也不会失败，但他们没有。所以一切都好。

但是，问题的另一半，涉及MiniCssExtractPlugin，仍然不起作用。因此，如果我在网上找不到解决方案，我会问一个与此相关的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.