在学习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 undefinedn    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问价如下：

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

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