你知道源码映射吗？

最新推荐文章于 2024-10-12 10:03:20 发布

月夕

最新推荐文章于 2024-10-12 10:03:20 发布

阅读量960

点赞数 3

文章标签： web webpack

本文链接：https://blog.csdn.net/qq_43778239/article/details/106131171

版权

文章目录

webpack源码映射

什么是源码映射？
相信你在一个使用webpack打包的项目中经常会在控制台输出一些东西吧？
例如这样的一个报错
源码中报错部分代码

function Hello(props){//这里的prop.sex是故意写错的
    return <p>名字：{ props.name }----年龄：{ props.age }----性别：{ prop.sex }</p>
}

在这里插入图片描述
我想表达是的，报错的地方是main.js(webpack打包后的js文件)，然后点击去查看具体的错误代码时。？？？？？？？？？？？？？？，What？这怎么看？代码全部被编译压缩成一行了？

其实这个现象并不难理解
众所周知，webpack打包的生产模式会将代码压缩，所有这里看到的代码就是压缩后的结果

那么如何让他不压缩，可以原样显示文件的错误位置呢？
把打包模式改成development模式呗。接下来看一下效果

- mode:"production"
+ mode:"development",

确实不是一行了，但是报错位置还是跟源文件不太对，但也足以调试了。
在这里插入图片描述
那么这就解决了？如果怎么简单就解决了的话，我也不会特意写一篇文章啦。哈哈哈哈，自夸了。

先来讲一下这样做的弊端吧
实现我们知道，在开发模式下打包代码不会被压缩，造成的第一个问题就是，文件体积相对于生产模式大了几十倍怕是都不止。

讲到这，我突然发现他除了文件大一点也没啥影响哈。哈哈哈哈哈，毕竟开发都是再本地，文件传输并不收到网络影响。

接下来我就开始正题了

什么是源码映射？
例如webpack将es6压缩到es5了，那么你需要启用源码映射才能在浏览器中看到你的源代码（压缩编译前的代码）

他不会受到webpack打包模式的影响，因为它的执行原理是会在打包时生成专属的map映射文件

什么时候使用源码映射？
当你使用了代码编译工具（例如babel，css预处理器等一切会改变你源码的东西）但有想在控制台看到编译前的代码时

如何使用源码映射？
接下来我就说一下吧
一个项目上线时对代码的压缩是必不可少的，但是webpack默认只能压缩js代码，对css无能为力。如果想要压缩css代码，那么你需要使用optimize-css-assets-webpack-plugin（插件具体如何使用我就不多介绍了，看官网就好）

但是当你使用了optimize-css-assets-webpack-plugin插件时。
但是，如果使用了optimize-css-assets-webpack-plugin就会无法压缩js文件，需要再用一个uglifyjs-webpack-plugin插件来压缩js

const OmtimizeCss = require("optimize-css-assets-webpack-plugin");
const UglifyjsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  optimization: {//优化项
      minimizer: [//压缩选项
          new UglifyjsPlugin({//压缩js
              cache: true,//是否使用缓存
              parallel: true,//是否使用并发打包
              sourceMap: true//是否使用源码映射
          }),
          new OmtimizeCss({})//压缩css
      ]
  }
}

在此配置中你已经发现了源码映射的足迹。

可惜的是，当你使用babel后，UglifyjsPlugin包的源码映射配置就无效了。大家都知道babel是一个现代主流框架必不可少的。那么你需要使用source-map插件来帮你完成源码映射
配置如下：

module.exports = {
   ...
    devtool: "source-map",//增加映射文件
        //source-map会产生单独的文件（无法断点调试），特点是大和全。报错会产生行和列
    //eval-source-map不会产生单独的文件 ，报错会产生行和列
    //cheap-module-source-map，不会产生列，但是是一个单独的映射文件
    //cheap-module-eval-source-map 不会产生单独的文件，是集成到打包后的文件中的，不会产生列
    ...
};