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
        }
    });
}

@编辑：

所以，经过一番研究，我在 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 配置。你甚至看不到它。如果是基础应用，没有特殊需求，这个过程应该足够了。

问候克里斯