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

安装之后重新编后的结果如下图：

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