SourceMap 配置原理搞起来！彻底解惑 webpack 的 sourcemap 配置

2023-09-19 11:02:58

webpack 是一个现代 JavaScript 应用程序的打包工具，它可以将许多模块的不同资源（如 JavaScript、CSS、图像等）打包到一个或多个 bundle 中。当我们使用 webpack 进行开发时，sourcemap 是一个非常重要的工具，它可以帮助我们在开发和生产环境中调试和排错。

sourcemap 是什么？

sourcemap 是一个将编译后的代码映射回源代码的文件。当我们在浏览器中运行 JavaScript 代码时，浏览器会将代码编译成机器码，以便计算机能够理解和执行。sourcemap 可以帮助我们在浏览器中查看编译后的代码，并将其映射回源代码，以便我们能够更容易地调试和排错。

webpack 中的 sourcemap 配置

webpack 中的 sourcemap 配置位于 webpack.config.js 文件中。我们可以通过以下方式配置 sourcemap：

module.exports = {
  devtool: 'source-map'
};

上面的配置将生成一个 sourcemap 文件，该文件将包含编译后的代码和源代码之间的映射关系。

webpack 中提供了多种 sourcemap 配置选项，我们可以根据需要选择合适的选项。以下是一些常用的 sourcemap 配置选项：

eval: 将 sourcemap 内联到 JavaScript 文件中。这种配置选项对于开发环境非常有用，因为它可以让我们在浏览器中查看编译后的代码，并将其映射回源代码。
cheap-source-map: 将 sourcemap 存储在一个单独的文件中。这种配置选项对于生产环境非常有用，因为它可以减少 JavaScript 文件的大小。
hidden-source-map: 将 sourcemap 存储在一个单独的文件中，但不会将其包含在 JavaScript 文件中。这种配置选项对于需要隐藏源代码的生产环境非常有用。