一、 介绍

sourcemap主要是用来通过源码映射增强调试的。

你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。

配置方式：

{
  devtool: false // 关闭
}

或

{
  devtool: 'cheap-module-eval-source-map'
}

sourcemap主要有以下几种：

• none
• eval
• cheap-eval-source-map
• cheap-module-eval-source-map
• eval-source-map
• cheap-source-map
• cheap-module-source-map
• inline-cheap-source-map
• inline-cheap-module-source-map
• source-map
• inline-source-map
• hidden-source-map
• nosources-source-map

二、具体解析

官网给出的例子容易让人看懵，因为官网的devtool类型都是以组合形式给出的，实际上webpack中的sourcemap的基本类型包括：

• eval
• cheap
• moudule
• inline
• source-map。

其他的类型都是根据这5个基本类型组合而来。我们来具体分析一下这5个基本类型

1、eval

每个module都使用eval()执行，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后的对应关系。

缺点：由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。

webpackJsonp([1],[  
function(module,exports,__webpack_require__){    
eval(
      ...      
//# sourceURL=webpack:///./src/js/index.js?'
    )
  },  
function(module,exports,__webpack_require__){   
 eval(
      ...      
 //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
    )
  },
...])

每一个模块后面都增加了一端包含sourceURL的注释，sourceURL的值是压缩前的代码，这样就通过sourceURL关联了压缩前后的代码

2、source-map

使用source-map会为每一个打包后的模块生成对应的.map文件

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
  ...
])//# sourceMappingURL=index.js.map

3、inline

使用inline属性，不会生成独立的.map文件，而是将.map文件以dataURL的形式插入。

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
  ...
])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

打包好模块后，在sourceMappingURL中直接将.map文件中的内容以DataURL的方式引入。

4、cheap

cheap同source-map类型，都会生成一个.map文件，区别在于cheap会忽略源码中的列信息

5、module

包含了loader模块之间的sourcemap

三、 如何选择

在不同的环境中如何选择sourcemap的类型？

首先源代码的列信息没有必要，这时就可以考虑cheap属性，其次不管在生产环境还是开发环境，我们都需要定位debug到最最原始的资源，比如定位错误到jsx，coffeeScript的原始代码处，而不是编译成js的代码处，因此，不能忽略module属性，最后希望生成.map文件，需要增加source-map属性。

所以推荐

• 开发环境使用：cheap-module-eval-source-map
• 生产环境使用：cheap-module-source-map

如果生产环境不需要生成.map文件，直接使用none

参考链接：

• https://www.webpackjs.com/configuration/devtool/#devtool
• https://blog.csdn.net/liwusen/article/details/79414508