Angular8和webpack4：未捕获ReferenceError：未定义vendor_lib＆源映射错误

Question

我正在研究一个非常基本的界面，该界面最初是用Angular2编写的。 我是Angular2的新手，甚至是webpack的新手

我已经完成了从Angular2.4到Angular8.0的迁移

我也已经从webpack2.2.0迁移到了webpack4.33.0（感谢我们可以找到的教程）

现在正在执行以下操作：npm run build：dev

但是，当我启动Chrome页面时，出现此错误：

bootstrap:2 Uncaught ReferenceError: vendor_lib is not defined
    at Object.<anonymous> (bootstrap:2)
    at i (bootstrap:2)
    at Object.<anonymous> (bootstrap:2)
    at i (bootstrap:2)
    at Object.<anonymous> (a11y.es5.js:27)
    at i (bootstrap:2)
    at Module.<anonymous> (bootstrap:2)
    at i (bootstrap:2)
    at o (bootstrap:2)
    at bootstrap:2
(anonymous) @ bootstrap:2
i @ bootstrap:2
(anonymous) @ bootstrap:2
i @ bootstrap:2
(anonymous) @ a11y.es5.js:27
i @ bootstrap:2
(anonymous) @ bootstrap:2
i @ bootstrap:2
o @ bootstrap:2
(anonymous) @ bootstrap:2
(anonymous) @ bootstrap:2

bootstrap:2 Uncaught ReferenceError: vendor_lib is not defined
    at Object.<anonymous> (bootstrap:2)
    at r (bootstrap:2)
    at Object.<anonymous> (bootstrap:2)
    at r (bootstrap:2)
    at Module.<anonymous> (bootstrap:2)
    at r (bootstrap:2)
    at o (bootstrap:2)
    at bootstrap:2
    at bootstrap:2
(anonymous) @ bootstrap:2
r @ bootstrap:2
(anonymous) @ bootstrap:2
r @ bootstrap:2
(anonymous) @ bootstrap:2
r @ bootstrap:2
o @ bootstrap:2
(anonymous) @ bootstrap:2
(anonymous) @ bootstrap:2

当寻找那个bootstrap：2时，我得到了：

     // install a JSONP callback for chunk loading
     function webpackJsonpCallback(data) { <====ERROR at this line
         var chunkIds = data[0];
         var moreModules = data[1];
         var executeModules = data[2];

         // add "moreModules" to the modules object,
         // then flag all "chunkIds" as loaded and fire callback
         var moduleId, chunkId, i = 0, resolves = [];
         for(;i < chunkIds.length; i++) {
             chunkId = chunkIds[i];
             if(installedChunks[chunkId]) {
                 resolves.push(installedChunks[chunkId][0]);
             }
             installedChunks[chunkId] = 0;
         }
...

我查看了似乎是相同错误的每条帖子。 有时我有死链接，或者在更改我的Webpack配置时不起作用（例如，将供应商设置为null）

我必须承认，“ vendor_lib”并没有真正回应我，而且即使它确实与webpack链接，我也没有找到关于它可能是什么的真正解释。

这是webpack.dev.config.js文件

const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;

module.exports = function (options) {
    return webpackMerge(commonConfig({env: ENV}), {
        devtool: 'cheap-module-source-map',
        entry : {
            vendor: []
        },
        output: {
            path: helpers.root('dist'),
            filename: '[name].bundle.js',
            sourceMapFilename: '[file].map',
            chunkFilename: '[id].chunk.js',
            library: 'ac_[name]',
            libraryTarget: 'var',
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                    include: [helpers.root('src', 'styles')]
                },
                {
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader'],
                    include: [helpers.root('src', 'styles')]
                },
            ]
        },
        plugins: [
            new DefinePlugin({
                'ENV': JSON.stringify(METADATA.ENV),
                'HMR': METADATA.HMR,
                'process.env': {
                    'ENV': JSON.stringify(METADATA.ENV),
                    'NODE_ENV': JSON.stringify(METADATA.ENV),
                    'HMR': METADATA.HMR,
                }
            }),
            new DllBundlesPlugin({
                bundles: {
                    polyfills: [
                        'core-js',
                        {
                            name: 'zone.js',
                            path: 'zone.js/dist/zone.js'
                        },
                        {
                            name: 'zone.js',
                            path: 'zone.js/dist/long-stack-trace-zone.js'
                        },
                        'ts-helpers',
                    ],
                    vendor: [
                        '@angular/platform-browser',
                        '@angular/platform-browser-dynamic',
                        '@angular/core',
                        '@angular/common',
                        '@angular/forms',
                        '@angular/http',
                        '@angular/router',
                        '@angularclass/hmr',
                        'rxjs',
                    ]
                },
                dllDir: helpers.root('dll'),
                webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
                    devtool: 'cheap-module-source-map',
                    plugins: []
                })
            }),
            new AddAssetHtmlPlugin(
                [{ filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
                 { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }]
            ),
            new LoaderOptionsPlugin({
                debug: true,
                options: {
                }
            }),
        ],
        devServer: {
            port: METADATA.port,
            host: METADATA.host,
            historyApiFallback: true,
            watchOptions: {
                aggregateTimeout: 300,
                poll: 1000
            }
        },
        node: {
            global: true,
            crypto: 'empty',
            process: true,
            module: false,
            clearImmediate: false,
            setImmediate: false
        }
    });
}

@edit：

因此，经过一些研究，我发现在firefox上运行时出现新的消息错误：

Source map error: TypeError: Invalid URL: webpack://ac_[name]/webpack/bootstrap
Resource URL: http://localhost:9090/polyfills.bundle.js
Source Map URL: polyfills.bundle.js.map
Source map error: TypeError: Invalid URL: webpack://ac_[name]/webpack/bootstrap
Resource URL: http://localhost:9090/main.bundle.js
Source Map URL: main.bundle.js.map

看来polyfills.bundle.js和main.bundle.js都可以投放并且可以访问。

因此看来问题出在配置文件中。 有谁知道这个错误来自哪里？

Answer 1

抱歉，我将无法为您解决webpack问题。

在您的情况下，我将尝试从头开始创建Angular-CLI项目，然后将源增量复制到项目中。

Angular-CLI项目在内部为您隐藏和管理webpack配置。 您甚至都看不到。 如果它是没有特殊需要的基本应用程序，则此过程应足够。

克里斯问候