9、配置source-map

source-map

该配置是用于映射源码的,用于调试功能

具体用法

使用devtool属性,具体有四种值

四种类型
  1. 源码映射,会单独生成一个sourcemap文件(.map格式),出错了,会标识出错的当前列和行
module.exports = {
    devtool:'source-map'//添加映射文件,可以帮助我们调试源代码
}
  1. 不会产生单独的sourcemap文件(.map格式) ,但是可以显示行和列
module.exports = {
    devtool:'eval-source-map'//添加映射文件,可以帮助我们调试源代码
}
  1. 会单独生成一个sourcemap文件(.map格式) ,但不会产生单独的列,只能定位到行 但是是一个单独的映射文件,用得不多
module.exports = {
    devtool:'cheap-module-source-map',//产生后你可以保留起来,用于调试
}
  1. 不会产生单独的sourcemap文件(.map格式),继承在打包后的文件中,不会产生列,只能定位到行
devtool:'cheap-module-eval-source-map',
Webpack中,source map是一种文件,它将转换后的代码映射回原始源代码,以便于调试。它提供了一种在浏览器中查看和调试实际源代码的方式,而不是查看和调试转换后的代码。 通过在Webpack配置中设置`devtool`选项,可以启用source map。具体来说,`devtool`选项有多种可选值,每个值都代表不同的source map类型。以下是一些常见的`devtool`选项值: - `eval`: 使用eval包裹模块代码,并且使用data URL形式的source map。 - `cheap-eval-source-map`: 类似于`eval`,但是每行都有一个source map映射。 - `cheap-module-eval-source-map`: 类似于`cheap-eval-source-map`,但是会将loader的source map也包括进来。 - `eval-source-map`: 使用eval包裹模块代码,并且生成独立的source map文件。 - `cheap-source-map`: 类似于`eval-source-map`,但是不包含列信息,只能定位到行。 - `cheap-module-source-map`: 类似于`cheap-source-map`,但是会将loader的source map也包括进来。 - `source-map`: 生成独立的source map文件,完整包含所有信息。 要根据项目需求选择合适的`devtool`选项。通常在开发环境中使用更详细的source map类型(如`eval-source-map`),而在生产环境中使用更简单的source map类型(如`cheap-source-map`)以获得更好的性能。 配置示例: ```javascript module.exports = { // ... devtool: 'eval-source-map', // ... }; ``` 这样配置后,在开发环境中,Webpack会生成一个独立的source map文件,帮助你进行调试和定位问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值