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问价以下：

安装以后从新编后的结果以下图：

再打开浏览器页面就能够正常显示了，控制台的报错也消失了。