javascript - webpack yeniden derlemesinden sonra CommonsChunkPlugin ile 'call' özelliği okunamayan TypeError

Bir HTML dosyasını require etmeye çalışırken garip bir hata alıyorum. Söz konusu kod, Typescript ile yazılmış ve webpack kullanan bir AngularJs uygulaması.

uygulama.yönlendirici.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) {

  }
}

uygulama.html

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

app.scss boş.

Şu anda, yorumlar dahil, bu kod webpack ile hatasız bir şekilde derleniyor ve webpack geliştirme sunucusu kullanılarak dağıtılacak.

Webpack geliştirme sunucusunu kullanırken, sunucu çalışırken kodu değiştirmenize ve canlı olarak yeniden yüklemenize izin veren, yorum satırlarını kaldırabileceğim herhangi/tüm yorumlanmış satırlar ve düzgün bir şekilde çalışacaktır.

Ancak, eğer geliştirme sunucusunu kapatıp yeniden inşa edersem, bu hatayı vererek başarısız oluyor:

Yakalanmamış TypeError: Tanımsız'ın 'call' özelliği okunamıyor

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(anonim fonksiyon) @ main.bundle.js:1

webpack:boostrap dosyasındaki bu satırda hata veriyor:

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

Bu hata, app.scss satırının, controller satırlarının veya app.html satırının yorumdan çıkarılmaya çalışılması sırasında oluşur. Bu, yalnızca bir yeniden derlemeden sonra, herhangi bir veya tüm satırlar yorumdan çıkarıldığında meydana gelir.

Webpack kullanarak derleme yapıyorum ve tsconfig'te modül yükleme için commonjs kullanıyorum, ve webpack.config içerisinde bu tür dosyalar için aşağıdaki webpack yükleyicilerine sahibim:

      {
        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')]
      },

Bir süredir Angular JS ve TypeScript kullanıyorum, ama bu kendi projemi başlatmamın ilk zamanı ve hâlâ webpack ile yolumu bulmaya çalışıyorum.

Bu kodu çalışırken eklersem neden çalışacağını ama yeniden derledikten sonra neden çalışmayı durduracağını anlamakta çok kafam karıştı. Bunun webpack konfigürasyonumla ilgili bir şey olduğunu düşünüyorum, ama çözemedim ve bir süredir bu konuda takılı kaldım. Herhangi bir yardım takdir edilir.

GÜNCELLEME Nedeni buldum, ama çözümü değil. Görünüşe göre webpack konfigürasyonumdaki CommonsChunkPlugin tarafından kaynaklanıyor:

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

Eklentiyi kaldırırsam hata ortadan kalkıyor, ama o zaman bu eklentim olmuyor.

GÜNCELLEME 2

Eklenti başlatımını bunu yapmak sorunu çözer:

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

Ama hâlâ nedenini anlamıyorum

Cevap #1

Zze'nin tavsiyesi üzerine cevabın olarak güncelleme #2'yi paylaşıyorum.

Eklenti başlatımını bunu yapmak sorunu çözer:

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

Ama hâlâ nedenini anlamıyorum

Cevap #2

Aynı sayfada birden fazla webpack ile derlenmiş dosya yüklerseniz, bunlar birbirlerinin üzerine yazacaktır. Uygulamanız için bir 'isim alanı' tanımlamak üzere module.output.library seçeneğini kullanın.

İlgili makaleler