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'
能对一些简单的错误,快速的做出提示。但是对一些复杂的错误,给出的提示信息很模糊。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步