在前端开发中，sourcemaps 可以帮助我们调试混淆后的 JavaScript 和 CSS 代码。本文将介绍如何在使用 Babel 和 Webpack 的项目中生成 sourcemaps。
什么是 sourcemaps？
在前端开发中，我们通常会将 JavaScript 和 CSS 代码压缩和合并成一个或多个文件以提高页面性能。但这样做会导致代码变得难以调试。sourcemaps 可以解决这个问题。
sourcemaps 是一种映射文件，它将压缩后的代码行映射回原始源代码行。当浏览器显示错误或警告时，可以使用 sourcemaps 帮助我们定位到源代码的位置，从而更快地修复问题。
如何配置 babel 和 webpack 生成 sourcemaps？
配置 Babel
Babel 是一个流行的 JavaScript 编译工具，可以将 ES6+ 代码转换为兼容性更好的 ES5 代码。在使用 Babel 时，我们需要配置 .babelrc 文件来指定转换规则和插件。要生成 sourcemaps，我们需要在 .babelrc 中添加 sourceMaps: true 选项。
{
"presets": ["@babel/preset-env"],
"plugins": [],
"sourceMaps": true
}配置 Webpack
Webpack 是一个打包工具，可以将多个 JavaScript 文件打包成一个或多个文件。在使用 Webpack 时，我们需要配置 webpack.config.js 文件来指定打包规则和插件。
要生成 sourcemaps，我们需要在 webpack.config.js 中添加 devtool: 'source-map' 选项。
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
devtool: 'source-map'
};以上示例中，我们使用 source-map 作为 devtool 的值。这会在生成的 bundle 文件中包含一个 sourcemap 文件。
验证 sourcemaps 是否生效
当我们完成上述配置后，我们可以在浏览器中打开页面并按 F12 进入开发者工具。如果代码出现错误或警告，我们可以看到类似于下面的信息：
Uncaught TypeError: Cannot read property 'length' of undefined
at index.js:2在这个信息中，index.js:2 指示错误发生在 index.js 文件的第二行。但是我们实际上只有一个压缩过的 bundle.js 文件，如何找到源代码呢？
如果 sourcemaps 生效，我们可以在开发者工具中找到转换后的源代码。在 Chrome 浏览器的 Sources 面板中，我们可以看到以下内容：
在这个面板中，我们可以看到转换后的源代码和对应的 sourcemap 文件。通过 sourcemap，我们可以定位到原始源代码的位置。
总结
本文介绍了如何在使用 Babel 和 Webpack 的项目中生成 sourcemaps。sourcemaps 可以帮助我们调试混淆后的 JavaScript 和 CSS 代码，提高开发效率。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8927
