未捕获的类型错误:无法读取属性'呼叫'在webpack重新生成CommonsChunkPlugin后，共

Uncaught TypeError: Cannot read property 'call' of undefined after webpack rebuild CommonsChunkPlugin

本文关键字：新生 webpack CommonsChunkPlugin 呼叫 错误 类型 读取 属性      更新时间：2023-09-26

我在尝试需要html文件时遇到了一个奇怪的错误。有问题的代码是一个AngularJs应用程序，它是用typescript编写的，并使用webpack。

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

export default class AppController {
  public static $inject = ['$scope'];
  constructor(private $scope) {
  }
}

app.html

<div>
  THIS IS A TEST, REMAIN CALM
</div>

app.scss为空。

现在，由于包含了注释，这段代码在webpack中构建时没有任何错误，并将使用webpack-dev服务器进行部署。

使用webpack-dev服务器时，可以在服务器运行时更改代码并实时重新加载，我可以取消注释任何/所有注释行，它将正常工作。

然而，如果我关闭开发服务器并重新构建，它将失败，并给出以下错误：

未捕获的类型错误：无法读取未定义的属性"call"

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（匿名函数）@main.bundle.js:1

在webpack中的这一行失败：boostrap文件：

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

尝试取消注释app.scss行、控制器行或app.html行时会出现此错误。这种情况只有在重新生成后才会发生，其中任何或所有行都未注释。

我使用webpack进行构建，并在tsconfig中使用commonjs进行模块加载，并且在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')]
      },

我已经使用angular js和typescript有一段时间了，但这是我第一次开始自己的项目，我仍然在蹒跚地完成webpack。

我很困惑，如果我在运行时插入它，但在重建后就停止工作，为什么这个代码会工作。我认为这与我的webpack配置有关，但我无法弄清楚，我已经被困了一段时间。如有任何帮助，我们将不胜感激。

更新我找到了原因，但没有找到解决办法。这似乎是由我的webpack-config:中的CommonsChunkPlugin引起的

new webpack.optimize.CommonsChunkPlugin({
      name: helpers.reverse(['polyfills', 'vendor', 'main']),
      // minChunks: Infinity
    }),

如果我删除了这个插件，错误就会消失，但我就不再有这个插件了。

更新2

将插件初始化更改为这样可以修复问题：

new webpack.optimize.CommonsChunkPlugin({
  names: ['polyfills', 'vendor', 'main'],
  minChunks: 2
}),

但我仍然不明白为什么

根据Zze的建议发布更新#2作为答案

将插件初始化更改为这样可以修复问题：

new webpack.optimize.CommonsChunkPlugin({
  names: ['polyfills', 'vendor', 'main'],
  minChunks: 2
}),

但我仍然不明白为什么

如果在同一页面上加载了多个webpack编译的文件，它们将相互覆盖。使用module.output.library选项为应用程序定义"命名空间"。

相关文章：