写在前面
注意:webpack 5
对 devtool
属性值更为严格,属性值名称规定了一定的顺序。
下面有些内容是基于 webpack 4.x
配置的,如果有关于 webpack 5
具体改动而出现的报错,需要我们自己查看官网文档去做对应的改动。
打包编译后的代码与开发时候的代码有很大的差异,如果需要调试应用,或者应用出现错误,将很难定位错误。因为此时调试和报错都是基于转换过后的代码,Sourse Map
(源代码地图)就是解决这种问题的。
很多第三方库都有 Source Map
文件。一般会以注释的方式引入 Source Map
文件,在最新版的 jQuery
里去除了 Source map
的注释,这里我们可以手动将 Source Map
引入进来。在加载到 jquery-3.4.1.min.js
文件的时候,控制台调试器会根据 Source Map
注释自动加载 Source map
文件,根据 Source Map
内容逆向解析出对应的源代码,以便于我们的代码调试。因为有了映射关系,出现错误就很容易定位源代码位置。
总结:Source Map
的作用就是解决了前端引入了自动构建方式所导致的源代码与运行代码不一致产生的问题。
webpack
提供了多种 Source Map
类型的配置。
打包后:
可以看到打包后的 bundle
文件自动添加了 Source Map
的注释。运行代码时,根据控制台错误信息就可以直接定位到源代码。
webpack
还支持多种 Source Map
模式。
eval
是 js
的一个函数,可以用来运行字符串中 js
代码。
eval('console.log(123)') // 123
在控制台中运行这段代码,默认会运行在虚拟机环境中。
我们可以通过 sourceURL
声明这段代码所属的文件路径。
eval('console.log(123) //# sourceURL=./foo/bar.js') // 123
这时候所声明的这段代码的运行环境就是 ./foo/bar.js
,这就意味着我们可以通过 sourceURL
改变 eval
执行的这段代码的所属环境的名称,其实依然是运行在虚拟机环境,只不过是告诉了 js
引擎这段代码执行的路径名称,只是一个标识。下面将 devtool
属性设置为 "eval"
:
打包后:
根据控制台提示可以找到错误出现的文件,打开文件会发现这是打包转换过后的代码。因为这种模式下 webpack
会把所有打包的模块代码放到 eval
函数去执行,并且通过 eval
函数所传入字符串的最后用 sourceURL
方式去说明对应的文件路径。
eval
模式下不会生成 Source Map
文件,出现错误时可以根据 sourceURL
在控制台定位出错的文件,但仅仅只是定位到文件。因为 eval
模式不需要生成 Source Map
文件,所以构建速度是最快的。
不同的 devtool
模式有不同的差异,下面对这些不同的方式进行横向对比。
webpack.config.js
文件可以导出一个对象或数组。
运行打包命令后,会根据不同模式打包出不同的文件。
使用开发服务器把 dist
目录运行起来。
关于开发服务器可以使用 browser-sync
也可以使用 serve
,这里使用 serve
。
yarn add global serve
serve dist
- eval
- eval-source-map
- cheap-eval-source-map
- cheap-module-eval-source-map
- cheap-source-map
- inline-source-map
- hidden-source-map
- nosources-source-map
注意:webpack 5
对 devtool
属性值更为严格,属性值名称规定了一定的顺序。
由模式的命名特点可以总结:
eval -> 是否使用 eval 执行模块代码
cheap -> Source Map 是否只包含行信息
module -> 是否能够得到 Loader 处理之前的源代码
理解不同模式的区别,选择适合的 Source Map
。开发模式下使用 cheap-module-eval-source-map
,生产模式下使用 none
。
最新的 webpack 5 对 devtool 格式更严格,webpack 5 开发模式下的 devtool 模式使用 eval-cheap-module-source-map 最高效。