webpack:开发环境下调试代码-source-map_devtool: 'source-map-优快云博客

本文详细探讨了webpack中source-map的配置与使用，包括不同devtool选项的效果，如'source-map'、'inline-source-map'、'hidden-source-map'等。通过实例展示了它们在开发环境中的调试优势与差异，帮助开发者选择合适的source-map策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我们将代码故意写错一个地方，运行webpack命令，看浏览器报错情况

不设置source-map

可以看到报错的地方并没有为我们提供具体的位置。

设置不同的source-map

sourse-map：一种提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误。

设置source-map只需要在webpack.config.js中设置devtool即可

设置devtool:'source-map'

设置devtool:'source-map'，执行webpack命令，会重新生成一个map文件

在浏览器中查看：

报错时会指出具体的报错位置，并且点击报错，可以看到具体报错的代码，在page中还可以看到源代码。

总结：设置devtool:'source-map'，报错会给出错误代码的准确信息和源代码的错误位置。

设置devtool:'inline-source-map'

inline-source-map在生产环境和开发环境都可以使用。

执行webpack命令之后，可以看到在built.js文件中嵌入了sourceMap内容

在浏览器中查看，inline-source-map会提供报错的信息和报错的源代码位置

设置devtool:'hidden-source-map'

会生成一个map文件

但是hidden-source-map有一个问题，在浏览器中的报错只会给报错原因和对应的打包文件报错文件，不会提供源代码的报错位置。

设置devtool:'eval-source-map'

每个文件都会生成一个source-map内容，

报错信息也给出了原因和位置，但是信息中多了hash值

点击报错也可以关联源代码，跳转到源代码报错的位置

设置devtool:'nosources-source-map'

设置devtool:'nosources-source-map'会另外生产一个map文件

浏览器中报错指出来错误的信息和位置

但是在点击报错时不会关联源代码

设置devtool:'cheap-source-map'

设置devtool:'cheap-source-map'也会生成一个map文件

浏览器中也会显示错误信息

点击报错也会关系到源代码中

但是，有一点需要注意，cheap-source-map只会定位到行，如果一行中包含了许多代码，不会定位到具体的点。

总结

devtool可以有很多值设置，并且还可以组合设置，那我们应该怎么选择呢？

几种source-map的比较

    source-map：外部
        在外部生成一个map文件
        提供错误代码准确的信息和源代码的错误位置
    inline-source-map:内联
        只生成一个内联source-map
         提供错误代码准确的信息和源代码的错误位置
    hidden-source-map:外部
        在外部生成一个map文件
         提供错误代码准确的信息，但是没有错误位置
         不能追踪源代码错误，只能提示到构建后代码的错误位置。
    eval-source-map：内联
        每一个文件都生成对应的source-map，都嵌入在输出文件中
        提供错误代码准确信息和源代码的错误位置
    nosources-source-map：外部
        在外部生成一个map文件
        提供错误代码准确信息，但是没有任何源代码信息
    cheap-source-map:外部
        在外部生成一个map文件
        提供错误代码准确信息和源代码的位置信息，但是只能精确到行，不能精确到点
    cheap-module-source-map：外部
        在外部生成一个map文件
        module会将loader的source map加入
    
    内联和外部的区别：
    1、外部生成了文件，内联没有
    2、内联构建速度更快

开发环境和生产环境的要求：

1、开发环境：要求速度快，调试更友好

速度比较：eval→inline→cheap→其他

速度要求可以选用eval-cheap-source-map→eval-source-map

调试更友好可以选用source-map→cheap-module-source-map→cheap-source-map

综合考虑可以选中eval-source-map（react和vue等脚手架使用）→eval-cheap-module-source-map

2、生产环境：源代码要不要隐藏，调试要不要更友好

内联会让代码体积变大，所以生产环境不选用内联

所以首先要排除内联的source-map，只能从下面几种选择（这里不考虑混合使用的情况）

source-map

hidden-source-map

nosource--source-map