Webpack devtool 配置详解：从原理到生产环境最佳实践

Webpack devtool 配置概述

关于 Devtool

该选项用于控制是否生成以及以何种形式生成源映射（Source Map）。官方文档列出了多种可选值，开发者可根据具体需求进行选择。

这些可选值中，部分适用于开发环境，部分适用于生产环境。在开发阶段，通常追求快速的 Source Maps 生成速度，为此可以接受较大的打包体积；而在生产环境中，则需要独立且精确的 Source Maps，以支持代码最小化后的错误定位。

选择合适的源映射样式能够显著增强调试体验，同时这些配置也会大幅影响构建和重建的速度。除了使用 devtool 选项外，还可以直接通过 SourceMapDevToolPlugin 或 EvalSourceMapDevToolPlugin 插件来实现更灵活的控制。需要注意的是，不要同时使用 devtool 选项和对应的插件，因为 devtool 选项在内部已经集成了相应插件，同时使用会导致插件被应用两次，引发冲突。

不同 devtool 选项实例详解

实例详解

1.新建print.js

export default function printMe() {
 console.log('武昌鱼@222');
}

2.新建index.js

import printMe from './print.js';
function component() {
 var element = document.createElement('div');
 var btn = document.createElement('button');
 btn.innerHTML = 'Click 1me and check 1the console!';
 btn.onclick = printMe;
 element.appendChild(btn);
 return element;
}
document.body.appendChild(component());

3.新建webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
   title: ' webpack之devtool'
  })
 ]
};

4.使用不同的devtool选项

none

当配置为 none 时，打包后点击打印按钮，控制台（console）显示的文件名为 main.js:96。生成的代码如下所示：

eval

在 eval 模式下，每个模块会被封装在 eval() 函数中执行，并在代码末尾追加特定的注释信息。

Each module is executed withevaland//@ sourceURL.

打包之后点击打印按钮，控制台（console）显示的文件名为 print.js:3，生成的代码如下所示：

source-map

使用 source-map 配置后，你会发现 output 目录下多了一个 index.js.map 文件。该文件记录了 Source Map 的行列信息，用于映射源代码与打包后代码的对应关系。点击打印按钮，控制台（console）显示的文件名为 print.js:3，生成的代码如下所示：

main.js

main.js.map

hidden-source-map

使用 hidden-source-map 配置后，打包生成的 main.js 与 source-map 选项相比，少了末尾的引用注释，但 output 目录下的 index.js.map 文件依然存在且未减少。点击打印按钮，控制台（console）显示的文件名为 main.js:96。

inline-source-map

使用 inline-source-map 配置后，可以看到末尾的注释中，Source Map 以 DataURL 的形式被内嵌进了 bundle 文件中。由于 Source Map 的所有信息都被直接添加到 bundle 中，导致整个 bundle 文件体积变得非常庞大。点击打印按钮，控制台（console）显示的文件名为 print.js:3，生成的代码如下所示：

main.js

eval-source-map

该模式与 eval 类似，但会将注释中的 Source Map 转换为 DataURL 格式。控制台（console）显示的文件名为 print.js?dc38:2，生成的代码如下所示：

main.js

cheap-source-map

cheap-source-map 的生成结果与 source-map 大致相似，output 目录下的 index.js 内容也保持一致。然而，cheap-source-map 生成的 index.js.map 文件中的代码量远少于 source-map 生成的版本。对比上文 source-map 生成的 index.js.map 结果，可以发现 source 属性中缺少了列信息，具体对比如下所示：

main.js.map

cheap-module-source-map

该模式在一个单独的文件中生成不带列映射的 Map 文件。由于省略了列映射，打包速度得到了提升，但这也导致浏览器开发者工具只能定位到具体的行，无法对应到具体的列（符号），从而对精细调试造成一定不便。

开发环境与生产环境配置建议

总结

开发环境推荐使用：

1.eval：每个模块使用 eval() 和 //@ sourceURL 执行。这种方式速度非常快，主要缺点是没有正确显示行号，因为行号被映射到了转换后的代码而非原始代码（且没有来自加载器的源映射）。

2.eval-source-map：每个模块使用 eval() 执行，而 Source Map 作为 DataUrl 添加到 eval() 中。虽然初始构建速度较慢，但它提供了快速的重建速度并生成真实的文件。行号被正确映射到原始代码，因此它产生了最优质的开发资源。

3.cheap-eval-source-map：与 eval-source-map 类似，每个模块都使用 eval() 执行。它不包含列映射，仅映射行号。该模式忽略了来自加载器的源代码，并且只显示与 eval devtool 相似的经过转换的代码。

4.cheap-module-eval-source-map：类似于 cheap-eval-source-map，但在本例中，来自加载器的源映射被处理以获取更好的结果。然而，加载器源映射被简化为每一行的单个映射。

生产环境推荐使用：

1.(none)：省略 devtool 选项，即不触发 Source Map 生成。这是一个很好的选择，适用于不需要调试的生产环境。

2.source-map：生成一个完整的 Source Map 作为单独的文件。它为 bundle 添加了引用注释，使得开发工具知道在哪里找到该映射文件。

3.hidden-source-map：与 source-map 相同，但不向 bundle 添加引用注释。如果您只希望 Source Maps 从错误报告中映射错误堆栈跟踪，而不想为浏览器开发工具暴露您的 Source Map，可以使用此选项。

4.nosources-source-map：生成一个不包含源代码的 Source Map。它可以用于在客户端映射堆栈跟踪，而不暴露所有源代码。您可以将源映射文件部署到 Web 服务器，以便在发生错误时进行定位，同时保护源代码安全。