webpack5 基础配置 (5)深入认识source-map,初始babel

在第四章的时候初步认识了一下source-map，知道他是来帮我们映射源代码文件的，接着继续深入学习

devtool可以设置非常多的值，通常用它来设置source-map。
我们主要了解几个关键的。

1false

设置为false，则表示不生成source-map

2 none

在开发模式下，设置为none会报错。none只能在生产模式生成，效果跟false差不多，他的意思是省略devtool。其实mode设位production时，devtool默认值已经是none。mode为development时，devtool值是eval。

3 eval

效果：不生成source-map，但会
变成eval函数，为什么呢？eval函数的作用也是执行字符串代码，写成字符串的主要目的是，为了

让后面这行注释生效，这行注释有什么用呢。它的效果类似于source-map，webpack为了方便开发人员在开发阶段可以更好的找到错误在哪，所以默认给devtool设置了eval属性，当我们打包后的代码报错时，浏览器会直接指出报错的地方是在哪里。


除此之外，eval的打包速度也是相当之快。一般开发情况下都是设置eval

4 source-map

这个会生成一个source-map文件，
这个上一章其实已经大概讲过了。因为这次我设置的是开发模式，开发模式不需要转换变量。所以names的属性为[]。
而且不使用eval。

可以看到比eval更具体的找到了错误的位置，并且生成了webpack的源配置文件，当发生错误就可以最快定位到是哪里发生错误。

5 eval-source-map

会生成source-map,但是不会真的生成source-map文件

他是会把source-map的内容转为base64内嵌在bundile.js文件中，这样就不需要请求source-map文件。


也跟source-map一样可以找到错误的准确位置。

补充点：eval配置的，只会运行到第一个错误，就停止向下运行。

可以看下，只会抱一个错误，并且，源文件只是映射了一个，第二个并没有映射。

只要带有eval的配置名，都会直接内嵌到bundle.js文件中，并且使用eval执行代码。

6 inline-source-map

还是没生成source-map文件，并且是内联在了bundle.js文件中。注意与eval的区别


虽然只报一个错误，但是浏览器会映射到所有的源代码。

7 cheap-source-map(开发阶段建议)

cheap低开销，通常比source-map高效一点，因为没有生成列映射。 什么是列映射呢。sourcr-map是会将报错信息直接映射到哪一行哪一列哪里错了。而cheap-source-map只会帮我们直接提示哪一行报错，没有做列映射。这就是性能提升的地方。

可以看到少了个names属性

8 cheap-module-souce-map

类似cheap-source-map,但是效果比它好一点，因为对源自Loader的sourcemap处理会更好。什么意思呢，我们先基本使用一下babel转换es6的代码，然后使用cheap-source-map试试。会发现报错的时候，他找到的是Index.js文件，跟我们实际发生错误的文件不太一样。而使用了cheap-module-source-map.
会具体报告错误信息。尤其是以后用到ts转化js等等的情况下，使用cheap-source-map可能会导致映射出现问题，但是使用cheap-module-source-map就能解决。

hiden-source-map

顾名思义，隐藏source-map,他把budle.js文件中最后的注释删掉了。但是报错也不会找到具体信息。

nosources-source-map

nosource，顾名思义，没有源文件，也就是说他会报错
会提示尼哪里错了，但是

不会生成源文件。

webpack帮我们生成了26个值，是可以进行组合的。

规则是：


Vue的话是开发模式就是默认source-map的，而react是有做处理的。暴露出配置文件看一下

判断是不是生产模式，不是的话判断是不是开发环境，然后定义cheap-module-source-map
是生产模式判断用不用source-map，是的话使用，不是的话设位false.

开发中的推荐：source-map/cheap-moduel-source-map

测试阶段推荐：source-map/cheap-moduel-source-map

发布阶段： false,缺省值（不写）

初始babel

当我们写ES6，ts，jsx语法时，我们运行到浏览器都是要转换成es5的。用什么转换呢？Babel就诞生了。
babel是一个工具链，跟postcss很想，自身功能很少，但是可以借助插件使其功能变得很强大。
官方：用于浏览器将es5+的代码转换为向后兼容的js版本
包括：语法转换，源代码转换，Polyfill实现目标缓解减少的功能（后续介绍）
babel和postcss一样，也是个独立的工具。不用依赖webpack

现在我们单独使用下babel试试

cnpm install @babel/core -D（核心）
cnpm install @babel/cli -D (命令行使用)
基本使用

npx babel src --out-dir result

npx是找到当前目录下的babel模块。 src会找到里面的index --out-dir是输出的意思 result输出到result文件

可以看到，被转化了，但是只去掉了括号，es6还没被转换。因为我们现在只使用了babel的内核，Babel的内核功能很少，所以我们需要安装相对应的插件。

我们现在想转换箭头函数，所以我们可以安装相应插件

cnpm install @babel/plugin-transform-arrow-functions -D
接下来使用它
npx babel src --out-dir result --plugins=@babel/plugin-transform-arrow-functions
在后面带上要使用的插件。
可以看大哦，箭头函数已经转换了。
但const还没转化，所以我们要安装另一个插件去转化。
cnpm install @babel/plugin-transform-block-scoping
使用它，
npx babel src --out-dir result --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
在后面加上逗号即可。

可以看到Const已经转为var了。

但是如果有很多语语法需要转换的时候要一次次写吗？答案是不用的，我们可以使用一个插件，转换全部。

cnpm install @babel/preset-env -D
@babel/preset-env 相当于是一系列插件的组合。当我需要对应的插件的时候，他会默认帮我们找到需要的插件。
使用
npx babel src --out-dir result --presets=@babel/preset-env

不仅帮我们转换，而且还开启了严格模式。

babel的底层原理

我们先来大概了解下js是如何被执行的。

js代码首先被解析为AST（抽象语法树）,然后在转换为字节码ByteCode，字节码就可以被浏览器处理。

从解析到处理这个阶段就是我们的编译器做的事情。

而babel做的事情，就是在代码转换为AST后，将原来的AST转换为新的AST，然后再转换为ES5的bytecode。所以babel本质上，就是js的一个编译器。（相当于把一种源代码，转为零一种源代码）

babel的工作流程：1 解析阶段 2转成阶段 3 生成阶段。看一张图(来自coderwhy老师)，babel的真正转换过程

首先时原生代码，词法分析阶段，babel会对整个文件的每个字符进行词法分析。然后会提取出来每个字符串，如const a = bb 这些都会被提取出来。词法分析，顾名思义对每个词进行分析。然后根据每个词生成tokens数组。()

可以看到每一个字符都被提取出来了。而且还做了分类，比如变量name foo被分到了type为identifier等等。然后再交给语法分析，根据我们的type值不同，做不同的处理。比如const的type值是keyword，babel就会进行这样一个分析 if(token.value === const) {定义了一个常量}。当全部语法分析完，就会转成ast树。

上图为抽象语法树，

接着就是遍历这个树，访问到每一个节点。访问的过程中，如果要改变节点，比如const->var，就需要借助plugin插件的帮助了。插件也是一堆代码，它可以帮我们做一些值得修改。插件就是在在这环节起作用了。接着插件转换完后，就会生成新的抽象语法树。再生成目标源代码。

小结：babel就是类似于一个js的编译器，根据源代码进行词法分析，生成对应的tokens数据，然后对tokens数据做语法分析，通过不同类型生成AST,接着开始遍历，访问到每一个节点。当该节点的值需要转换，如const=>var时，就要应用插件plugin。插件也是在这一环节起作用。最后遍历访问转换完后新的AST树，生成目标源代码