source map 是一种可以将处理后的代码映射回源代码的工具，能够帮助咱们追踪错误在源代码中的位置javascript
这篇文章，咱们将会讲解在 webpack 中经过 devtool 选项配置使用 source map 的一些事情html
首先咱们来看一下，在不使用 source map 的状况下，项目开发会出现什么问题java
建立一个空文件夹 Demo 做为项目的根目录，在该目录下使用命令安装项目的所需依赖node
> # 建立 package.json > npm init -y > # 安装 webpack > npm install --save-dev webpack > npm install --save-dev webpack-cli
而后咱们在根目录下建立 dist 和 src 目录，并在相应的目录下建立相应的文件，最终的目录结构以下webpack
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
- hello.js
- goodbye.js
+ dist
- index.html
webpack.config.js 文件内容，指定 webpack 的一些基本配置web
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
/dist/index.html 文件内容，这里只是简单地写了一个 HTML 模板，引入打包以后的 bundle.js 文件shell
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
/src/index.js 文件内容，在 index.js 文件中引入 hello.js 文件和 goodbye.js 文件npm
import { SayHello } from './hello.js'
import { SayGoodbye } from './goodbye.js'
SayHello()
SayGoodbye()
/src/hello.js 文件内容，hello.js 文件导出一个函数，做用是在控制台打印 日志信息json
export function SayHello() {
console.log('Hello World')
}
/src/goodbye.js 文件内容，goodbye.js 文件导出一个函数，做用是在控制台打印 错误信息浏览器
export function SayGoodbye() {
console.error('Goodbye World')
}
而后运行构建命令，以 index.js 为入口构建模块依赖图，将全部依赖的文件打包后输出到 bundle.js 文件
> npx webpack --config webpack.config.js
以后，在浏览器打开 /dist/index.html 文件，在控制台应该能够看到这样的信息
Hello World bundle.js:9 Goodbye World bundle.js:9
因为项目中全部的源代码都被打包成一个 bundle.js 文件
因此堆栈跟踪也只是简单地指向 bundle.js，没法精肯定位到具体哪一个文件，这对咱们调试可能没有太大的帮助
那要怎么办呢？好了，这个时候就要轮到 source map 登场啦！
它能够将打包后的代码映射为原始的代码，在发生错误时明确指出到底是哪一个文件发生错误
webpack 中经过 devtool 选项指定如何生成 source map，咱们修改 webpack.config.js 文件内容以下
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'cheap-module-eval-source-map'
};
而后，从新运行构建命令
> npx webpack --config webpack.config.js
打开 /dist/index.html 文件，在控制台应该能够看到打印的信息以下
Hello World hello.js?0278:2 Goodbye World goodbye.js?de2d:2
这时候，打印的日志信息和错误信息终于都指向原始的代码文件啦
事实上， devtool 有不少不一样的可选值，选择不一样的值会明显影响到堆栈跟踪和构建速度
对于开发环境，咱们一般但愿 更快速 的 source map，这就须要 source map 添加到 bundle 中进去
对于生产环境，咱们一般但愿 更精准 的 source map，这就须要 source map 从 bundle 中分离出来
devtool 选项的可选值以下：
| devtool | 构建速度 | 从新构建速度 | 使用环境 |
|---|---|---|---|
| eval | 很是快 | 很是快 | 开发环境 |
| eval-source-map | 慢 | 比较快 | 开发环境 |
| cheap-eval-source-map | 比较快 | 快 | 开发环境 |
| cheap-module-eval-source-map | 通常 | 快 | 开发环境 |
| none | 很是快 | 很是快 | 生产环境 |
| source-map | 慢 | 慢 | 生产环境 |
| hidden-source-map | 慢 | 慢 | 生产环境 |
| nosources-source-map | 慢 | 慢 | 生产环境 |
| inline-source-map | 慢 | 慢 | 特定场景 |
| cheap-source-map | 比较快 | 通常 | 特定场景 |
| inline-cheap-source-map | 比较快 | 通常 | 特定场景 |
| cheap-module-source-map | 通常 | 慢 | 特定场景 |
| inline-cheap-module-source-map | 通常 | 慢 | 特定场景 |
要记住上面这么多的信息是十分困难的，可是咱们不难发现，上面的不少选项其实都是经过几个关键字拼接出来的
bundle.js 文件中，每一个模块调用 eval 执行，而且存在 sourceUrl 指向原始文件bundle.map.js 文件，这个文件与原始文件之间存在映射map 文件，可是存在 sourceMappingURL 储存 map 文件的 Base64 编码map 文件，在注释中经过 sourceMappingURL 储存 map 文件的 Base64 编码【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】