1 Star 0 Fork 0

宁夏的独角戏 / webpack-source-map

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
README.md 2.03 KB
Copy Edit Web IDE Raw Blame History
Dandan Wu authored 2020-07-08 16:13 . readme

webpack-source-map

介绍

本项目测试webpack支持的 Source Map 的不同模式打包效果

编译

  1. npm install
  2. npm run build

webpack支持的source map模式

  • eval

eval 模式下,Webpack 会将每个模块代码放到 eval 函数中执行,并且通过 sourceURL 标注所属文件路径,在这种模式下没有 Source Map 文件,所以只能定位是哪个文件出错

  • eval-source-map

相比eval,会生成Source Map 文件,因此除了定位文件,还可以定位具体的行列信息

  • cheap-eval-source-map

阉割版的eval-source-map,只会定位行,不会定位列,效果上差一点,但是构建速度会提升很多

  • cheap-module-eval-source-map

cheap-eval-source-map 的基础上多了一个 module,名字中带有 module 的模式,解析出来的源代码是没有经过 Loader 加工的,而名字中不带 module 的模式,解析出来的源代码是经过 Loader 加工后的结果。也就是说如果我们想要还原一模一样的源代码,就需要选择 cheap-module-eval-source-map 模式

除此之外,还有几个特殊一点的模式,我们单独介绍一下:

  • inline-source-map

它跟普通的 source-map 效果相同,只不过这种模式下 Source Map 文件不是以物理文件存在,而是以 data URLs 的方式出现在代码中。我们前面遇到的 eval-source-map 也是这种 inline 的方式。

  • hidden-source-map

在这个模式下,我们在开发工具中看不到 Source Map 的效果,但是它也确实生成了 Source Map 文件,这就跟 jQuery 一样,虽然生成了 Source Map 文件,但是代码中并没有引用对应的 Source Map 文件,开发者可以自己选择使用。

  • nosources-source-map

在这个模式下,我们能看到错误出现的位置(包含行列位置),但是点进去却看不到源代码。这是为了保护源代码在生产环境中不暴露

建议使用

开发环境下选择 cheap-module-eval-source-map

产品环境下选择 none (不生成 Source Map 文件)

Comment ( 0 )

Sign in for post a comment

1
https://gitee.com/danwbj/webpack-source-map.git
git@gitee.com:danwbj/webpack-source-map.git
danwbj
webpack-source-map
webpack-source-map
master

Search