source-map 详解

前言

本文主要归纳总结source-map的各种模式的使用和区别，如果你还对该属性不够清楚，这篇文章希望会帮到你。如有写的不对的地方，欢迎掘友指出。

一. 介绍 source-map

我们知道前端编写的代码运行到浏览器上是通过webpack或者vite等工具打包压缩后展示的，当我们代码进行一些调试debug,调试转化后的代码是困难的，所以这时候我们就需要用到source-map，它可以将转化后的代码映射到源文件中。

二. source-map 模式

webpack中如下： 官方链接

1. 默认不生成 source-map

• false ： 不开启source-map
• none ： production默认值，不开启
• eval ：development默认值，不开启, 每个模块都使用 eval() 执行，并且都有 //# sourceURL。此选项会非常快地构建。 主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。

2. 对于开发环境生成 source-map

• eval-source-map ： 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

• eval-cheap-source-map ： 类似 eval-source-map，每个模块使用 eval() 执行。这是 "cheap(低开销)" 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 eval devtool。

• eval-cheap-module-source-map ： 类似 eval-cheap-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。

3.特定场景

以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的，例如，针对一些第三方工具。

inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中。

cheap-source-map - 没有列映射(column mapping)的 source map，忽略 loader source map。

inline-cheap-source-map - 类似 cheap-source-map，但是 source map 转换为 DataUrl 后添加到 bundle 中。

cheap-module-source-map - 没有列映射(column mapping)的 source map，将 loader source map 简化为每行一个映射(mapping)。

inline-cheap-module-source-map - 类似 cheap-module-source-map，但是 source mapp 转换为 DataUrl 添加到 bundle 中。

4. 生产环境

(none)（省略 devtool 选项） - 不生成 source map。这是一个不错的选择。

source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。

hidden-source-map - 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。

nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

上方的模式大家可点击 source-map模式代码示例进行更好的理解和学习。

二. JS 配置 source-map

1. webpack

const path = require("path");
module.exports = {
  mode: "development",
  devtool: "eval",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
  },
};

2. vite

export default defineConfig({
  build: {
    sourcemap: true,
  },
});

三. css 配置source-map

1. webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  devtool: 'source-map',
};

2. vite

export default defineConfig({
  css: {
    devSourcemap:true
  },
})