使用typescript与webpack搭建开发环境（三）

开发环境设置

上一章
在日常开发的过程中，debug是避免不了的，我们都知道webpack是把文件打包了的，对于debug来说是非常不方便的，本章主要说一下怎么debug

准备环境

修改 webpack.config.js

module.exports = {
    // mode: "development"
   }

把这行代码注释掉

新增一个ts文件

在src目录下新增一个名为Person.ts的文件，内容如下

修改index.ts文件

之前的代码全部注释或删除，新增以下内容

内容准备完成，现在来启动项目实践debug

启动调试

执行yarn start 现在开始调试项目

启动之后我们会发现在终端中会出现这样一个提示，出现这个提示的原因是因为我们在第一步修改的webpack.config.js文件，webpack不知道该以什么模式启动项目了。
mode的类型有两个，分别是development和production,分别代表开会环境和正式环境。稍后在进行配置。

接下来打开浏览器会看到控制台

我们在调用方法的时候传入的参数是undefined,所以报这个错了，我们也知道怎么去改，可是在开发项目的过程中不可能每一个地方都记得特别清楚，我们是需要控制台去精准的提示给我们是哪里报凑了，从上图中我们可以看到是main.js文件的第2行报的错，我们点击它定位到错误位置。

出现在眼前的是这一行压缩的代码，它是打包过的代码，是不利于调试的。我们要使用devtool来解决这个问题

devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

devtool其实就是选择对应的source map，它有很多种，现在来看一下每种都有什么区别。

source-map

这种是比较常见的，设置方法就是在webpack.config.js中修改这个属性，代码如下

module.exports = {
    mode: "development", //恢复设置
    devtool: 'source-map',
   }

设置完成之后启动项目看一下效果

精确的提示除了出错的文件和行数，方便我们准确的定位，那webpack究竟是做了什么呢。

• source-map会给打包后的模块生成soucemap文件

打包后的模块在最下面引用一个map文件，map文件就是打包后的文件和源文件之间的一个关联文件，里面记录着编译后的代码对应着源码中的位置

• inline-source-map

使用inline，webpack不会生成独立的map文件，而是将map文件内容以dataURL的形式插入到打包的文件中

• cheap-source-map
  它与source-map一样也是会生成独立的map文件，不同的是它不包含源代码中的列信息

• module-source-map

生成的map文件中还包含引用的一些第三方库

• eval-source-map
  每个模块都被eval执行，并且使用@sourceURL的方式引入map文件

不同的环境该使用哪种source-map

不同环境的配置使用，建议参考官方文档,只有官方文档才是最新最准确的

获取代码