阅读 2644

webpack学习之路(七)source map

我们用webpack打包文件之后,会生成一个编译压缩过的js文件。如果出现问题,这种代码是很难排查问题的,无法定位到源码。这种时候就需要source map

1.source map

简单说,source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。
-- 《JavaScript Source Map 详解》

《JavaScript Source Map 详解》——阮一峰

2.source map的格式

webpack中提供了很多种source map的格式。 官方地址

3.source map关键字

  • eval:使用eval包裹模块代码
  • source map:产生.map文件
  • cheap:不包含列信息
  • inline:将.map作为DataURI嵌入,不单独生成.map文件
  • module:包含loadersourcemap

4.source map的使用

一般来说,我们在开发环境使用,线上环境是关闭的。

我们来跑一下几个常用格式的例子。

简单初始化一个项目

.
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── style.css
└── webpack.config.js
复制代码

4.1 eval

devtool: 'eval'
复制代码

然后npm run build

我们可以在打包文件最下面发现这么一行代码,行尾会告诉你源码的位置

4.2 source-map

webpack.config.js我们设置一下:

devtool: 'source-map'
复制代码

build之后我们发现,会有两个生成文件

bundle.js最后一行,会告诉你需要找哪一个对应的.map文件

4.3 inline-source-map

webpack.config.js我们设置一下:

devtool: 'inline-source-map'
复制代码

build之后我们发现只有一个文件,这是因为加了inline之后不会独立生成.map文件,而是把.map文件以dataURL的方式嵌入到页面里。

在实际开发环境中,使用source-map或者inline-source-map模式debugger,可以直接看到源代码,非常方便。


链接文章

webpack学习之路(六)hash/chunkHash/contentHash

webpack学习之路(五)loader初识及常用loader介绍

webpack学习之路(四)webpack-hot-middleware实现热更新

webpack学习之路(三)webpack-dev-middleware

webpack学习之路(二)webpack-dev-server实现热更新

webpack学习之路(一)基础配置

I am moving forward.

文章分类
前端
文章标签