当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。

如果打包后代码有一处错误，特别是使用的vue、react这些前端框架。打包后很难定位问题。错误只能追踪到发生在打包后文件的哪个位置。打包后的文件不仅不方便阅读。还很难理解。

使用source map，就可以将编译后的代码映射回原始源代码。方便查看错误发生在原模块的哪个地方。

一般来说开发环境开启source map，线上环境关闭source map。

在webpack.config.js文件中配置source map

\\ webpack.config.js

module.exports = {

    devtool: 'eval'

}

devtool的常用配置

  • 生产模式一般使用 source-map , 会生成单独的 .map文件
  • 开发模式一般使用 cheap-module-source-map

webpack使用source-map: 参考https://webpack.docschina.org/guides/development/#using-source-maps

webpack devtool的配置: 参考https://webpack.docschina.org/configuration/devtool/

webpack和source map的更多相关文章

  1. webpack之source map

    先来一个webpack小例子,项目结构如下: // greeter.js module.exports = function() { var greet = document.createElemen ...

  2. 第五十八篇：webpack的Source Map

    好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...

  3. [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...

  4. 【转】webpack中关于source map的配置

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  5. 让 webpack 加载 Source Map

    在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...

  6. webpack学习_使用source map

    追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确 ...

  7. Source Map调试压缩后代码

    在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...

  8. [AngualrJS + Webpack] Production Source Maps

    When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a ...

  9. Source Map入门教程

    部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...

  10. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

随机推荐

  1. ubuntu安装ROBOWARE

    https://github.com/tonyrobotics/RoboWare/ https://blog.csdn.net/lixujie666/article/details/80139112 ...

  2. 下篇 | 使用 🤗 Transformers 进行概率时间序列预测

    在<使用 Transformers 进行概率时间序列预测>的第一部分里,我们为大家介绍了传统时间序列预测和基于 Transformers 的方法,也一步步准备好了训练所需的数据集并定义了环 ...

  3. JZOJ 3207.Orthogonal Anagram

    \(\text{Problem}\) 给出一个字符串,求经过重新排列的另一个字典序最小的字符串,满足:相同的位置上 原串与结果串的字符不同.不存在则输出空串. \(\text{Solution}\) ...

  4. Vulhub 漏洞学习之：Django

    Vulhub 漏洞学习之:Django 目录 Vulhub 漏洞学习之:Django 1 Django debug page XSS漏洞(CVE-2017-12794) 1.1 漏洞利用过程 2 Dj ...

  5. ASP动态网页（网站）设计教程

    ASP动态网页(网站)设计教程 文件名 大小 ASP获取时间函数大全 35KB 项目6 ASP数据表数据操作功能设计.pptx 3.34 MB 项目5 WEB数据库与数据库管理.pptx 3.34 M ...

  6. mysql 数据库的一些参数，常用模版和调优方式

    innodb_buffer_pool_size :这个参数是Mysql数据库最重要的参数之一,表示InnoDB类型的 表 和索引的最大缓存 .它不仅仅缓存 索引数据 ,还会缓存 表的数据 .这个值越大 ...

  7. RISC-V核及工具链整理

    RISC-V开源核分为开源核(无外设).SOC.FPGA.多核等多种框架. 开源核 SOC框架 平头哥无剑100 包括EDA仿真框架及FPGA框架 https://github.com/T-head- ...

  8. 树莓派lite安装桌面

    sudo apt update sudo apt install xorg -y sudo apt install lxde openbox -y sudo apt install pix-icons ...

  9. MyBatis-Plus通用Iservice 方法详解

    public interface IService<T> { /** * 默认批次提交数量 */ int DEFAULT_BATCH_SIZE = 1000; /** * 插入一条记录(选 ...

  10. mybatis处理多对一的映射关系

    创建数据库t_emp和t_dept 创建对应实体类 package org.example.entity; public class Emp { private Integer empId; priv ...