awesome-typescript-loader報watchRun問題

在學習webpack集成的過程當中，遇到集成typescript時報以下錯誤「Can not read property 'WatchRun' of undefined」。以下圖：

此時若是打開編譯後的bundle.js在最底部會有以下代碼：

(function(module, exports) {

throw new Error("Module build failed: TypeError: Cannot read property 'watchRun' of undefined\n    at setupWatchRun (D:\\webpack project\\webpack持續集成\\3-1使用ES6語言\\node_modules\\awesome-typescript-loader\\src\\instance.ts:369:17)\n    at Object.ensureInstance (D:\\webpack project\\webpack持續集成\\3-1使用ES6語言\\node_modules\\awesome-typescript-loader\\src\\instance.ts:137:2)\n    at compiler (D:\\webpack project\\webpack持續集成\\3-1使用ES6語言\\node_modules\\awesome-typescript-loader\\src\\index.ts:47:19)\n    at Object.loader (D:\\webpack project\\webpack持續集成\\3-1使用ES6語言\\node_modules\\awesome-typescript-loader\\src\\index.ts:16:12)");

/***/ })
/******/ ]);

這是由於typescript的配置文件tsconfig.json中的sourceMap參數決定的：

這個參數就是爲了方便調試typescript。在報錯以後錯誤會在瀏覽器的控制檯裏顯示，就是圖一的錯誤顯示。

報這個錯的主要緣由是typescript加載器的版本和webpack的版本不兼容致使：

官方有不少typescript加載器的loader。我用的是awesome-typescript-loader 5.0.0的版本，webpack版本此時是3.12.0版本的。把webpack版本更新到4.x能夠解決了。

注意：4.x版本的webpack須要和webpack-cli配合使用，安裝完成後的package.json問價以下：

安裝以後從新編後的結果以下圖：

再打開瀏覽器頁面就能夠正常顯示了，控制檯的報錯也消失了。