typescript 未捕获的类型错误：在 webpack 重建 CommonsChunkPlugin 后无法读取未定义的属性“调用”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36634530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'call' of undefined after webpack rebuild CommonsChunkPlugin
提问by Kyle
I have a strange error when trying to require an html file. The code in question is an AngularJs app written in typescript and using webpack.
尝试要求 html 文件时出现奇怪的错误。有问题的代码是一个用打字稿编写并使用 webpack 的 AngularJs 应用程序。
app.directive.ts
app.directive.ts
// require('./app.scss');
// import AppController from './app.controller';
function AppDirective(): ng.IDirective {
return {
restrict: 'E',
scope: {},
controllerAs: 'vm',
// controller: AppController,
controller: () => {},
// template: require('./app.html')
template: '<div>this is a test</div>'
}
}
angular
.module('myApp')
.directive('appDirective', AppDirective);
app.controller.ts
app.controller.ts
export default class AppController {
public static $inject = ['$scope'];
constructor(private $scope) {
}
}
app.html
应用程序.html
<div>
THIS IS A TEST, REMAIN CALM
</div>
app.scss is empty.
app.scss 为空。
Now, as it is, comments included, this code builds with no errors in webpack and will deploy using the webpack dev server.
现在，由于包含注释，此代码在 webpack 中构建时没有错误，并将使用 webpack 开发服务器进行部署。
While using the webpack dev server, which lets you change code while the server is running and reload it live, I can uncomment any/all of the commented lines and it will work properly.
在使用 webpack 开发服务器时，它允许您在服务器运行时更改代码并实时重新加载它，我可以取消注释任何/所有注释行，它会正常工作。
However, if I turn off the dev server and rebuild, it fails giving this error:
但是，如果我关闭开发服务器并重建，它会失败并给出以下错误：
Uncaught TypeError: Cannot read property 'call' of undefined
未捕获的类型错误：无法读取未定义的属性“调用”
Uncaught TypeError: Cannot read property 'call' of undefined__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.152 @ app.ts:2__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.153 @ main.browser.ts:1__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.0 @ main.bundle.js:7__webpack_require__ @ bootstrap 9163605…:50
webpackJsonpCallback @ bootstrap 9163605…:21(anonymous function) @ main.bundle.js:1
webpackJsonpCallback @ bootstrap 9163605…:21(匿名函数) @ main.bundle.js:1
fails at this line in the webpack:boostrap file:
在 webpack:boostrap 文件中的这一行失败：
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
This error occurs while trying to uncomment the app.scss line, the controller lines, or the app.html line. This happens only after a rebuild, with any or all of the lines uncommented.
尝试取消注释 app.scss 行、控制器行或 app.html 行时会发生此错误。这仅在重建后发生，任何或所有行都取消注释。
I'm using webpack to build, and commonjs for module loading in the tsconfig, and I have the following webpack loaders in the webpack.config for these types of files:
我正在使用 webpack 构建，并使用 commonjs 在 tsconfig 中加载模块，并且在 webpack.config 中有以下 webpack 加载器用于这些类型的文件：
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
I have been using angular js and typescript for a while, but this is the first time starting my own project, and I'm still stumbling my way through webpack.
我已经使用 angular js 和 typescript 有一段时间了，但这是第一次开始我自己的项目，我仍然在 webpack 上磕磕绊绊。
I am very confused as to why this code will work if I insert it while it is running, but then cease to work after rebuilding. I figure it has something to do with my webpack config, but I'm unable to figure it out and I've been stuck on this for a while. Any help would be appreciated.
我很困惑为什么如果我在运行时插入这段代码会起作用，但在重建后停止工作。我认为这与我的 webpack 配置有关，但我无法弄清楚，而且我已经坚持了一段时间。任何帮助，将不胜感激。
UPDATEI found the cause, but not a solution. It seems to be caused by the CommonsChunkPlugin in my webpack config:
更新我找到了原因，但没有找到解决方案。这似乎是由我的 webpack 配置中的 CommonsChunkPlugin 引起的：
new webpack.optimize.CommonsChunkPlugin({
name: helpers.reverse(['polyfills', 'vendor', 'main']),
// minChunks: Infinity
}),
If I remove the plugin the error disappears, but then I no longer have this plugin.
如果我删除插件，错误就会消失，但我不再有这个插件。
UPDATE 2
更新 2
Changing the plugin initialization to this fixes the issue:
将插件初始化更改为此可解决此问题：
new webpack.optimize.CommonsChunkPlugin({
names: ['polyfills', 'vendor', 'main'],
minChunks: 2
}),
But I still don't understand why
但我还是不明白为什么
采纳答案by Kyle
Posting update #2 as answer as per Zze's recommendation.
根据 Zze 的建议发布更新 #2 作为答案。
Changing the plugin initialization to this fixes the issue:
将插件初始化更改为此可解决此问题：
new webpack.optimize.CommonsChunkPlugin({
names: ['polyfills', 'vendor', 'main'],
minChunks: 2
}),
But I still don't understand why
但我还是不明白为什么
回答by Bart
If you have multiple webpack-compiled files loaded on the same page, they will overwrite each other. use the module.output.libraryoption to define a 'namespace' for your app.
如果你在同一个页面上加载了多个 webpack 编译的文件，它们会相互覆盖。使用该module.output.library选项为您的应用定义“命名空间”。
