什么是 Webpack Sourcemap？
Webpack Sourcemap 是一种映射文件，用于将编译后的代码映射回原始源代码。在开发过程中，我们通常会将代码分成多个模块进行编写，而 Webpack 会将这些模块打包成一个或多个文件。当我们在浏览器中执行这些打包后的文件时，如果出现了错误，我们很难定位到错误的具体位置，因为我们只能看到打包后的文件，而无法看到原始源代码。
Webpack Sourcemap 可以帮助我们解决这个问题。它会在打包后的文件中生成一个映射文件，该文件包含了打包后的代码和原始源代码之间的映射关系。这样，当出现错误时，我们就可以通过映射文件将错误定位到原始源代码的具体位置，方便我们进行调试和修复。
如何配置 Webpack Sourcemap？
在 Webpack 中配置 Sourcemap 很简单，只需要在配置文件中添加 devtool 属性即可。devtool 属性有多个选项可供选择，每个选项都有不同的优缺点，我们需要根据实际需求进行选择。
以下是一些常用的 devtool 选项及其特点：
eval：使用 eval() 函数执行打包后的代码，生成 Sourcemap。该选项速度较快，但会使打包后的代码变得难以调试。cheap-eval-source-map：使用 eval() 函数执行打包后的代码，生成 Sourcemap。该选项速度较快，同时也可以方便地进行调试。cheap-module-eval-source-map：与cheap-eval-source-map类似，但同时生成 Sourcemap 和原始源代码的映射关系。该选项速度较慢，但可以提供更好的调试体验。source-map：生成一个独立的 Sourcemap 文件，同时也可以方便地进行调试。该选项速度较慢，但可以提供最好的调试体验。
以下是一个简单的 Webpack 配置示例：
module.exports = {
// ...
devtool: 'cheap-module-eval-source-map',
// ...
};Sourcemap 文件是如何工作的？
Sourcemap 文件是一个 JSON 文件，其中包含了打包后的代码和原始源代码之间的映射关系。Sourcemap 文件的结构如下：
{
"version": 3,
"file": "bundle.js",
"sourceRoot": "",
"sources": [
"src/index.js",
"src/utils.js"
],
"names": [],
"mappings": ";;AAAA,IAAI,CAAC,GAAG,CAAC",
"sourceContent": {
"src/index.js": "console.log(add(1, 2));",
"src/utils.js": "function add(a, b) {\n return a + b;\n}"
}
}其中，version 表示 Sourcemap 文件的版本号，file 表示打包后的文件名，sourceRoot 表示源代码的根目录，sources 表示原始源代码文件的路径，names 表示打包后的代码中使用的变量名，mappings 表示打包后的代码和原始源代码之间的映射关系，sourceContent 表示原始源代码的内容。
mappings 是一个非常关键的部分，它描述了打包后的代码和原始源代码之间的映射关系。具体的映射关系可以通过 Sourcemap 解析器进行解析，从而将错误定位到原始源代码的具体位置。
如何使用 Webpack Sourcemap 进行调试？
使用 Webpack Sourcemap 进行调试非常简单，只需要在浏览器中打开开发者工具，然后在 Sources 面板中找到对应的源代码文件即可。当出现错误时，开发者工具会自动跳转到错误发生的位置，方便我们进行调试。
以下是一个示例代码，演示了如何使用 Webpack Sourcemap 进行调试：
// src/index.js
import { add } from './utils';
console.log(add(1, 2));// src/utils.js
export function add(a, b) {
return a + b;
}// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
devtool: 'cheap-module-eval-source-map'
};在该示例中，我们使用了 cheap-module-eval-source-map 选项生成 Sourcemap 文件。当我们在浏览器中执行打包后的文件时，如果出现错误，开发者工具会自动跳转到原始源代码的具体位置，方便我们进行调试。
总结
Webpack Sourcemap 是一个非常有用的工具，它可以帮助我们快速定位和修复代码中的错误。在使用 Webpack 进行开发时，我们应该根据实际需求选择合适的 Sourcemap 选项，并通过开发者工具进行调试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658930ebeb4cecbf2de6d797