source map 是一种能够将处理后的代码映射回源代码的工具，可以帮助我们追踪错误在源代码中的位置
这篇文章，我们将会讲解在 webpack 中通过 devtool 选项配置使用 source map 的一些事情
首先我们来看一下，在不使用 source map 的情况下，项目开发会出现什么问题
创建一个空文件夹 Demo 作为项目的根目录，在该目录下使用命令安装项目的所需依赖
> # 创建 package.json > npm init -y > # 安装 webpack > npm install --save-dev webpack > npm install --save-dev webpack-cli然后我们在根目录下创建 dist 和 src 目录，并在相应的目录下创建相应的文件，最终的目录结构如下
Demo - package.json - package-lock.json - webpack.config.js + node_modules + src - index.js - hello.js - goodbye.js + dist - index.htmlwebpack.config.js 文件内容，指定 webpack 的一些基本配置
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 文件
<!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 文件
import { SayHello } from './hello.js' import { SayGoodbye } from './goodbye.js' SayHello() SayGoodbye()/src/hello.js 文件内容，hello.js 文件导出一个函数，作用是在控制台打印 日志信息
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一般慢特定场景要记住上面这么多的信息是十分困难的，但是我们不难发现，上面的很多选项其实都是通过几个关键字拼接出来的
eval：在 bundle.js 文件中，每个模块调用 eval 执行，并且存在 sourceUrl 指向原始文件source-map：通过 sourceMappingURL 指向 bundle.map.js 文件，这个文件与原始文件之间存在映射eval-source-map：不会生成 map 文件，但是存在 sourceMappingURL 储存 map 文件的 Base64 编码inline-source-map：不会生成 map 文件，在注释中通过 sourceMappingURL 储存 map 文件的 Base64 编码cheap：调试的代码不会显示列位置信息module：调试的代码是原始的代码，不会经过转换【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】
转载于:https://www.cnblogs.com/wsmrzx/p/11487357.html
相关资源：JAVA上百实例源码以及开源项目