webpack的devtool 配置

前端_贾公子
178 阅读6分钟

webpack的devtool 配置

目录

[TOC]

webpack的devtool

devtool 配置 与 代码调试有关，此配置是为了增强代码调试过程。

前端发展到现阶段，很多时候都不会直接运行 源代码 ，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码。

如下图：

这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误。

为了解决这一问题，chrome浏览器率先支持了source map，其他浏览器纷纷效仿， 目前，几乎所有新版浏览器都支持了source map 。

source map实际上是一个配置，配置中不仅记录了所有源码内容，还记录了和转换后的代码的对应关系。

下图是浏览器处理source map的原理：

最佳实践：

  1. source map 应在 开发环境 中使用，作为一种调试手段。

  2. source map 不应该在生产环境中使用， source map 的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用source map，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题。

webpack中的source map：

使用 webpack 编译后的代码难以调试，可以通过 devtool 配置来 优化调试体验。

devtool 的其它配置

官方网站： Devtool | webpack 中文文档 | webpack中文文档 | webpack中文网

明白了！下面我只讲清楚各个 devtool 配置项的区别，不涉及优缺点，直接讲它们之间的不同。

1. 开发环境的 devtool 配置

eval

  • 每个模块用 eval() 执行。
  • 生成的 source map 只映射到转换后的代码，而不是原始代码。
  • 无法准确显示原始代码的行号。

eval-source-map

  • 每个模块用 eval() 执行，source map 嵌入在 eval() 中。
  • 生成的 source map 能准确映射到原始代码，并显示正确的行号。

cheap-eval-source-map

  • 和 eval-source-map 类似，但只映射到行级，而不是列级。
  • 不会包含 loader 的 source map，只映射转译后的代码。

cheap-module-eval-source-map

  • 和 cheap-eval-source-map 类似，但它会更好地处理 loader 的 source map。
  • 只映射到行级，源自 loader 的 source map 会简化为每行一个映射。
2. 生产环境的 devtool 配置

none

  • 不生成任何 source map 文件。

source-map

  • 生成完整的 source map 文件，包含原始代码的映射。

hidden-source-map

  • 和 source-map 类似，生成 source map 文件，但不会在代码中添加对 .map 文件的引用。

nosources-source-map

  • 生成 source map 文件，但不包含源代码内容，只有错误位置的映射。
总结：

  • 开发环境 ：

  • eval ：用 eval() 执行代码，行号不准确。

  • eval-source-map ：用 eval() 执行代码，行号准确，生成的 source map 更完整。

  • cheap-eval-source-map ：用 eval() 执行代码，行号准确，但不包含列级映射。

  • cheap-module-eval-source-map ：类似于 cheap-eval-source-map ，但更好地处理 loader 的 source map。

  • 生产环境 ：

  • none ：不生成 source map 文件。

  • source-map ：生成完整的 source map 文件。

  • hidden-source-map ：生成 source map 文件，但不会在代码中暴露其引用。

  • nosources-source-map ：生成 source map 文件，但不包含源代码内容。

productionSourceMap (生产环境地图资源)

productionSourceMap 这个配置通常是在 Vue CLI 中使用的配置项，而不是 Webpack 的原生配置。它用于控制在生产环境中是否生成源映射文件。

在 Vue CLI 项目的 vue.config.js 中， productionSourceMap 配置项可以用来决定是否在生产构建中生成 .map 文件。默认情况下，Vue CLI 会在生产构建时生成 source map 文件，除非你特别禁用它。

productionSourceMap 配置
// vue.config.js
module.exports = {
  productionSourceMap: false, // 禁用生成 source map 文件
};
启用与禁用的区别
  • 启用 source map （默认值 true ）：会生成 .map 文件，并保留原始的代码映射信息，方便调试。
  • 禁用 source map （设置为 false ）：不会生成 .map 文件，从而减少构建产物的体积，同时也不方便调试生产环境中的错误。
productionSourceMap 与 devtool 的关系
  1. Vue CLI 的 productionSourceMap 配置项是用来控制是否生成生产环境下的 source map。
  2. Webpack 的 devtool 配置项用于配置生成 source map 的方式，决定生成的 source map 类型（如 source-map , eval-source-map 等）。

当你使用 Vue CLI 时，它实际上是基于 Webpack 构建的。因此， productionSourceMap 会影响 Webpack 的 devtool 配置。Vue CLI 会根据 productionSourceMap 的值来设置 Webpack 中的 devtool 。

具体关系与优先级
  1. 当 productionSourceMap 为 false 时：
  • Vue CLI 会禁用生产环境中的 source map，内部会设置 Webpack 的 devtool 为 false ，这样就不会生成 .map 文件。
  • 这意味着不管你在 vue.config.js 中如何设置 devtool ，都不会生成 source map，因为 productionSourceMap: false 会覆盖这个设置。
  1. 当 productionSourceMap 为 true 时：
  • Vue CLI 会根据当前环境和其他配置设置适当的 devtool ，通常会使用 source-map （即生成独立的 .map 文件）作为默认设置。
  • 如果你在 vue.config.js 中显式设置了 devtool ，那么这个配置会覆盖 Vue CLI 的默认设置。例如，如果你设置了 devtool: 'cheap-module-source-map' ，那么 Webpack 会使用这个值，而不是 Vue CLI 默认的 source-map 。
1. 禁用生产环境中的 source map

如果你不想生成 source map 文件，可以在 vue.config.js 中禁用它：

// vue.config.js
module.exports = {
  productionSourceMap: false, // 禁用 source map
};
2. 显式设置 devtool

你也可以显式地在 vue.config.js 中设置 devtool ，例如：

// vue.config.js
module.exports = {
  productionSourceMap: true, // 启用 source map
  configureWebpack: {
    devtool: 'cheap-module-source-map', // 显式设置 devtool
  },
};

这里， productionSourceMap: true 会允许生成 source map，而 devtool: 'cheap-module-source-map' 会定义使用一种轻量级的 source map 格式。

3. 默认行为（启用 source map）

如果你没有显式设置 productionSourceMap 或 devtool ，Vue CLI 会默认在生产环境中启用 source map，并使用 source-map 作为 Webpack 的 devtool 设置：

// vue.config.js
module.exports = {
  // 默认启用 source map
  productionSourceMap: true,
};
总结
  • productionSourceMap 控制是否生成生产环境中的 source map。如果它为 false ，则会禁用 source map；如果为 true ，则生成 source map。
  • devtool 是 Webpack 配置项，控制如何生成 source map。如果你在 Vue CLI 中没有显式设置 devtool ，那么 Vue CLI 会根据 productionSourceMap 的值来自动选择一个合适的配置。
  • 优先级 ： productionSourceMap 在 Vue CLI 中起到更高的优先级，如果设置为 false ，它会覆盖 Webpack 的 devtool 配置，禁用 source map；如果为 true ，它会允许 Webpack 使用 devtool 配置来生成 source map。
avatar
文章
阅读
粉丝