node.js - Angular8 和 webpack4:未捕获的 ReferenceError:vendor_lib 未定义和源映射错误
问题描述
我正在开发一个最初用 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 都已提供且可访问。
所以看起来问题来自配置文件。有谁知道这个错误来自哪里?
解决方案
抱歉,我无法帮助您解决 webpack 问题。
在您的情况下,我会尝试从头开始创建一个Angular-CLI项目,然后将源增量复制到项目中。
Angular-CLI 项目在内部为您隐藏和管理 webpack 配置。你甚至看不到它。如果是没有特殊需求的基本应用,这个过程应该足够了。
问候克里斯
推荐阅读
- html - CSS - 带有切角和边框颜色的矩形 div
- ruby-on-rails - 如何在正在清理的 YML 文件中使用 link_to 助手?
- python - FastAPI - 如何在响应中使用 HTTPException?
- azure - Azure Logic App 从 Azure Blob 容器动态获取 Blob 内容,而无需将文件名保存在路径中
- sql - 网络设备和配置的数据库模式设计
- java - 在java中返回一个HashMap
- azure-ad-b2c - 访问令牌 - 生成授权码
- java - 在 Java 中使用一个 for 循环创建多个数组
- .net - 根据其类型 EF 核心获取相关对象
- javascript - 如何检查项目是否是循环内满足特定条件的最后一个元素