webpack中devtool的配置方案[开发模式]---[线上模式]

// 开发模式下
module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map'       
}
// 线上模式下
module.exports = {
  mode: 'production',
  devtool: 'cheap-module-source-map'       
}

 权威介绍请查看官方文档:https://webpack.js.org/configuration/devtool/

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'source-map'

能提示错误在源文件的具体位置。打包后会在output配置的路径[比如说dist目录]下,

生成一个`源文件`和`打包后的文件`的映射关系文件[xxx.map.js]。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'inline-source-map'

功能和source-map一样,不会生成映射关系文件,而是将映射关系写到了出口文件中[比如说main.js]

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'cheap-source-map'

没有加cheap时,会提示哪一行的哪一列发生了错误[二维坐标(x,y)];

加了cheap后提示哪一行发生了错误[一维坐标 (x)]。如果引入的第三方模块发生错误,此时也不会提示。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'cheap-module-source-map'

会同时提示业务文件和第三方文件发生的错误

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'eval'

能对一些简单的错误,快速的做出提示。但是对一些复杂的错误,给出的提示信息很模糊。

webpack中devtool的配置方案[开发模式]---[线上模式]_第1张图片

 

你可能感兴趣的:(webpack中devtool的配置方案[开发模式]---[线上模式])