webpack——sourcemap

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

我们在项目打包的时候，会将开发环境中的源代码进行压缩，去空格，babel编译转化等操作，最终发布到生产环境的项目代码和源代码之间会有很大的差异性，并且此时已经看不出来程序源码了，这样在debug的时候就会无法定位到具体的代码。

sourcemap就是为了解决代码定位的问题，它主要就是在处理前的代码和处理后的代码之间构建了一个桥梁，这样就可以方便开发人员的错误定位。

配置类型

sourcemap有多种配置类型，但主要就是5个关键词的任意组合，如下：

• eval：使用eval包裹的模块代码
• source-map：产生.map文件
• cheap：不包含列信息也不包含loader的sourcemap
• module：包含loader的sourcemap
• inline：将.map文件作为DataURI嵌入，不单独生成.map文件

上述5种关键词可以进行任意的组合，如下：

• cheap-eval-source-map：表示转化过的代码，只限行没有列
• cheap-module-eval-source-map：表示原始的源代码，只限行
• cheap-source-map：表示转换过的代码 生成的sourcemap没有列映射，从loaders生成的sourcemap没有被使用

如上，只要了解了上述5种关键词的含义，就可以将其进行组合，得到适合自己项目的sourcemap配置

vue项目中sourcemap配置

在vue3项目的开发环境当中，当报错调试的时候，发现部分代码找不到源码，文件也对应不到相应的文件夹中，如下图所示，当点击图中的报错提示时，并不能定位到具体报错的代码

这种情况下，我们需要再vue.config.js文件中加入如下配置：

module.exports = defineConfig({
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'production' ? false : 'source-map'
  }
})

在开发环境当中，我们将配置项devtool设置为source-map，然后重新启动，再次点击报错信息，发现就可以定位到源码的具体位置。