Angular8和webpack4 :未捕获ReferenceError:未定义vendor_lib &源映射错误
Angular8和webpack4 :未捕获ReferenceError:未定义vendor_lib &源映射错误
提问于 2019-09-11 22:16:57
我正在开发一个非常基本的接口，它最初是用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在查看该引导时: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配置时不起作用(例如将供应商设置为空)
我必须承认，"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都被服务并且可以访问。
因此，问题似乎来自配置文件。有人知道这个错误是从哪里来的吗？
回答 1
Stack Overflow用户
发布于 2019-09-11 22:58:50
很抱歉，我无法帮助您解决您的webpack问题。
在您的例子中，我会尝试从头开始创建一个Angular-CLI项目，然后增量地将源代码复制到项目中。
Angular-CLI项目会在内部为您隐藏和管理webpack配置。你甚至看不到它。如果它是一个没有特殊需求的基本应用程序，这个过程应该足够了。
问候Chris
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57891177
复制相关文章
相似问题
腾讯云开发者
