Uncaught TypeError：Webpackの再構築後に未定義のプロパティ 'call'を読み取れませんCommonsChunkPlugin

Question

htmlファイルを要求しようとすると、私は奇妙なエラーが発生します。問題のコードは、typescriptで書かれたwebpackを使ったAngularJsアプリです。

// 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が空である

app.directive.ts。

ここにコメントが含まれています。このコードはwebpackにエラーなしで構築され、webpack dev serverを使用して展開されます。

サーバーが稼働中にコードを変更してライブをリロードできるwebpack devサーバーを使用している間は、コメント行のコメントをすべて解除して正常に動作します。私はのdevのサーバーの電源をオフにして再構築する場合は、それがこのエラーを与える失敗

：

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 @ 9163605ブートストラップ...：main.bundle.js @ 21（無名関数）： 1

はWebPACKの中で、この行で失敗：ブートストラップファイル：

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

私が使用しています角度のあるjsとtypescriptがしばらくの間、これは私自身のプロジェクトを始めて初めてです、そして、私はまだwebpackを通して私の道をつまずきます。

実行中にこのコードを挿入すると、なぜこのコードがうまくいくのですか？しかし、再構築後にはこのコードが機能しなくなることは非常に混乱します。私はそれが私のwebpack設定と関係があると思うが、私はそれを理解することができず、私はしばらくの間これに固執してきた。どんな助けもありがとう。

更新 原因はわかりましたが、解決策は見つかりませんでした。私のWebPACKの設定でCommonsChunkPluginに起因すると思わ：

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

私はプラグインを削除すると、エラーが消えないが、その後、私はもはやこのプラグインを持っています。

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

しかし、私はまだ理解していない

Answer 1

Zzeの推奨に従って＃2の回答を投稿します。これにプラグインの初期化を変更する

は問題が修正されます。

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

しかし、なぜ

Answer 2

あなたは複数のWebPACK-コンパイルされたファイルがロードされた場合は、その理由：

これまでプラグインの初期化を変更するUPDATE 2

は、問題を修正します同じページでは、お互いを上書きします。 module.output.libraryオプションを使用して、アプリの「名前空間」を定義します。