sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用

article/2025/9/29 1:30:59

1.  什么是sourceMap

sourceMap 是一个信息文件， 维护着代码转换编译前后的映射关系;

2. devtool : 选项控制是否生成，以及如何生成 source map source Map对应的模式 

1）inline

2) cheap

3）module

4) eval

5) source-map

3-21 加载 Source Map · 深入浅出 Webpack

然后根据上述几种 进行组合 验证 devtool 名称时， 我们期望使用某种模式， 注意不要混淆 devtool 字符串的顺序， 模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.

见图： 

7e206a77168944c7967755b3c71251a9.png

 

 

如果是eval / inline 模式 不会生成单独.map 文件， 会以dataUrl 的形式 存在打包文件后的结尾

source-map 会生成单独的.map 文件 

3 . 浏览器中的表现形式

如果加载的js 的文件 结尾有#sourceMap（eval) 或者 #sourceMapUrl（source-map)(比如如果是hidden-source-map 这种打包出来的js 文件 就没有 ，所以不会自动关联)， 可以右键 选择 添加源映射

解析到#sourceMap 或者 #sourceMapUrl 的时候 会自动去关联到（hidden-xxx 的除外）

4. 使用了压缩插件 uglifyjs-webpack-plugin或者terser-webpack-plugin 如果想使用source-map 如果再设置下sourceMap: true， 因为压缩插件里面 默认 sourceMap: false

chainWebpack(config) {config.devtool('hidden-source-map').end()config.when(process.env.NODE_ENV === 'production',config => {config.optimization.minimizer('js').use(new uglifyjs({sourceMap: trueuglifyOptions: {warnings: false,compress: {drop_console: true,drop_debugger: true,pure_funcs: ['console.log', 'console.warn']}}}))})}

5.  生产环境下一般使用source-map 或者 hidden-source-map 模式  , 具体可以参考官网推荐, 生成的map 文件 不要和业务代码部署到一起， 防止被别人看到， 可以单独进行部署，实现私有化， 只能特定网络下访问， 比如部署到公司内网服务器, 此时就要修改js 文件结尾的#sourceMapUrl 链接地址 

//# sourceMappingURL=app.fea6fcf0.js.map 修改为

//# sourceMappingURL=http: xxxxx:xxxx/app.fea6fcf0.js.map 

6. 插件 ： 实现了对 source map 生成内容进行更细粒度的控制

 | webpack 中文文档

你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。

比如我们要单独部署.map 文件 需要修改map链接的地址, 可以设置这个时候publicPath或者 append 就可以使用插件：

const webpack = require('webpack')
module.exports = {productionSourceMap: true,chainWebpack(config) {config.plugin('SourceMapDevToolPlugin').use(webpack.SourceMapDevToolPlugin).tap(args => {return [{filename: '[file].map',publicPath: 'https://exmaple.com/',
// append: "\n//# sourceMappingURL=http://example.com/sourcemap/[url]",moduleFilenameTemplate: 'source-map'}]})}
}

上述代码打包之后 发现 js文件 结尾会有两个#sourceMapUrl

{return l&&h.REQUIRED&&d(e)&&!n(e,c)&&p(e),e},h=e.exports={REQUIRED:!1,fastKey:f,getWeakData:m,onFreeze:b};i[c]=!0}}]);
//# sourceMappingURL=https://exmaple.com/static/js/chunk-540c250b.99bc351b.js.map
//# sourceMappingURL=chunk-540c250b.99bc351b.js.map

这个就说明 vue-cli4(目前我使用的版本） 中使用了 devtool ，devtool 和SourceMapDevToolPlugin 插件同时存在，所以导致了两个sourceMap指向, SourceMapDevToolPlugin插件是用来替代devtool,看源码会发现  cli中有多处会根据 productionSourceMap这个布尔值来设置是否使用 devtool ；需要注意的是vue-cli4默认的js 压缩插件 是 terser-webpack-plugin, 如果想生成sourceMap 压缩插件这个属性必须设置true

两处源码如下：

0fa0b91f6e0f4e04b515b10bdb334954.png

b319320af99a473d871e72a6da05bec3.png

可能你会想直接设置productionSourceMap为false， 这个时候 就会导致 terser-webpack-plugin 插件sourceMap 也会为false, map文件就生成不了, 我们的目标是生成map文件 ， 同时去掉自带的devtool 保留SourceMapDevToolPlugin插件

所以第一种就是设置productionSourceMap为true, 同时在chainWebpack手动设置devtool：false, 覆盖自带的devtool,

const webpack = require('webpack')
module.exports = {productionSourceMap: true,chainWebpack(config) {config.devtool(false).end()config.plugin('SourceMapDevToolPlugin').use(webpack.SourceMapDevToolPlugin).tap(args => {return [{filename: '[file].map',publicPath: 'https://exmaple.com/',moduleFilenameTemplate: 'source-map'}]})}
}

第二种就是 设置productionSourceMap：false 同时设置压缩插件的sourceMap: true (但是这种不能保证其他插件需不需要设置 ) 所以最好还是选择第一种吧

const webpack = require('webpack')
const terser = require('terser-webpack-plugin')
module.exports = {productionSourceMap: false,chainWebpack(config) {config.plugin('SourceMapDevToolPlugin').use(webpack.SourceMapDevToolPlugin).tap(args => {return [{filename: '[file].map',publicPath: 'https://exmaple.com/',moduleFilenameTemplate: 'source-map'}]})
// vue-cli4 这种方式生效config.optimization.minimizer('terser').tap((args) => {args[0].sourceMap = truereturn args})}
}

 

同样css 也有sourceMap, vue-cli3 默认是关闭的

css: {

    sourceMap: true

  },

参考：

Devtool | webpack 中文文档

何为SourceMap？讲讲SourceMap食用姿势 - 知乎

https://www.jianshu.com/p/721b0d26e1ea

Webpack devtool source map « Cheng's Blog

Source Maps

深入浅出的webpack构建工具---devTool中SourceMap模式详解(四) - 龙恩0707 - 博客园

Webpack 实战系列一：正确使用 Sourcemap-51CTO.COM

webpack - vue-cli sourcemap私有化部署配置_个人文章 - SegmentFault 思否

 

 

 

 


http://chatgpt.dhexx.cn/article/x1Kfa1wO.shtml

相关文章

webpack之devtool

webpack之devtool

关于Devtool 该选项控制是否以及如何生成源映射。官网上给出的可选值有： 其中一些值适合开发，一些用于生产。对于开发，您通常需要快速的Source Maps，以bundle的大小为代价，但是对于生产，您需要独立的Sourc…
阅读更多...
chrome devtool使用基础

chrome devtool使用基础

保存js和css setting > workspace 工作区设置后，自动映射工作区 带绿色图标的文件，不需要请求 blackbox script 黑盒调试，调试不进入第三方代码，只调试项目代码 setting > blackbox 或者鼠标右键设置 network throttling profile 设置网络模式，网速限制，在ne…
阅读更多...
Chrome Devtool 使用指南

Chrome Devtool 使用指南

Chrome Devtool Performance使用指南 运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAI…
阅读更多...
devtool使用

devtool使用

记录点没用的东西 1. 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><version>2.3.2.RELEASE</version> </dependency> 2.pom中加入maven插件 <plugin…
阅读更多...
webpack devtool详解

webpack devtool详解

前言 devtool也是之前常用的一个配置&#xff0c;我们稍微了解下吧&#xff0c;不研究太深&#xff0c;毕竟现在都不怎配置他。 内容 devtool是配置sourceMap的。 sourceMap大家都知道&#xff0c;我们本地或者测试环境出了错误&#xff0c;可以在source中迅速定位错误&#x…
阅读更多...
devtool配置

devtool配置

devtool配置 一、devtool配置1.source map 源码地图2.webpack中的source map3.对于开发环境 一、devtool配置 1.source map 源码地图 本小节的知识与 webpack 无关 前端发展到现阶段&#xff0c;很多时候都不会直接运行源代码&#xff0c;可能需要对源代码进行合并、压缩、转换…
阅读更多...
dev-tool安装方法（手动安装版）

dev-tool安装方法（手动安装版）

记录一下vue调试神器dev-tool的安装过程&#xff0c;由于是在公司内网&#xff0c;也不方便挂梯子&#xff0c;所以手动安装——下载源码在本地编译&#xff0c;再添加扩展程序的方式安装。过程如下&#xff1a; 一、dev-tool源码获取 git地址&#xff1a;https://github.com/…
阅读更多...
一文彻底搞懂webpack devtool

一文彻底搞懂webpack devtool

为什么需要Source Map 首先根据谷歌开发者文档的介绍&#xff0c;Source Map一般与下列类型的预处理器搭配使用&#xff1a; 转译器&#xff08;Babel&#xff09;编译器&#xff08;TypeScript&#xff09;Minifiers&#xff08;UglifyJS&#xff09; 为什么呢&#xff1f;…
阅读更多...
OpenBmc开发8：devtool简介与使用

OpenBmc开发8：devtool简介与使用

1 简介 devtool是yocto中的一个工具&#xff0c;此命令行工具作为可扩展SDK&#xff08;eSDK&#xff09;的一部分&#xff0c;是基础组件。可以使用devtool来帮助构建&#xff0c;测试和打包eSDK中的软件。可以使用该工具有选择地将构建的内容集成到OpenEmbedded构建系统构建…
阅读更多...
怎么在navicat（Navicat for MySQL）中运行SQL代码

怎么在navicat（Navicat for MySQL）中运行SQL代码

1、首先在navicat中新建一个数据库&#xff08;之前已经建好数据库&#xff0c;忽略本步&#xff09; 2、点击上图中的“查询”命令 3、再点击“新建查询” 4、系统自动跳出如下图命令窗口 5、可以在命令行中敲代码或直接复制已有代码。如果代码是关于建表&#xff0c;执行成…
阅读更多...
使用SQL语句创建数据表

使用SQL语句创建数据表

写法一 create table student (sno char(10) primary key,sname varchar(20) not null,ssex char(2),sage smallint,sdept varchar(20),sid char(18) unique)写法二 create table student (sno char(10), sname varchar(20) not null, ssex char(2), sage smallint, sdept v…
阅读更多...
SQL代码自动生成器

SQL代码自动生成器

SQL代码自动生成器&#xff0c;效果图如下&#xff1a; 实现原理很简单&#xff1a; 通过数据库名&#xff0c;获取到数据表名&#xff0c;进而获取到数据字段。通过可视化的选择自定义的添加修改&#xff0c;一步一步完成SQL语句的编写。 其中对于常用的存储过程参数列表的书…
阅读更多...
sql语句智能提示插件

sql语句智能提示插件

1.下载安装 SqlPrompt10 及SQL.Prompt.Keygen注册码生成工具 链接: https://pan.baidu.com/s/1Oa3Ci6o2JjHZMjTXHdCkQg?pwdghew 提取码: ghew 2.修改hosts文件&#xff08;如若跳过此步骤&#xff0c;虽然可以成功&#xff0c;但是重启电脑之后&#xff0c;又得重新操作&a…
阅读更多...
sql server代码创建数据库详细过程

sql server代码创建数据库详细过程

1.先打开sql server 2.点击新建查询 3.创建 数据库 主数据文件的大小为5MB&#xff0c;文件【按兆字节】的方式增长&#xff0c;一次增长2MB&#xff0c;最大容量20MB&#xff1b; 事务日志文件大小为4MB&#xff0c;文件【按百分比】的方式增长&#xff0c;一次增长25%&#…
阅读更多...
vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter";3、接下来就是针对需要格式化的代码调用该方法就OK啦 /…
阅读更多...
SQL Server 代码颜色

SQL Server 代码颜色

今天初识SQL Server 随便敲了点代码、发现这代码真是五颜六色、既然有颜色就有寓意&#xff01; 原来有这么多颜色、真是学习了! _____________________________chenchen
阅读更多...
IDEA格式化SQL代码

IDEA格式化SQL代码

IDEA格式化SQL代码 写在前面1.1、建立连接&#xff0c;数据库服务器地址&#xff0c;账号&#xff0c;密码等..1.2、基本操作&#xff0c;很多&#xff0c;增删改查&#xff0c;控制台SQl编写等等 写在前面 IntelliJ IDEA集成了很多我们开发中常用的工具&#xff0c;Linux连接…
阅读更多...
SQL除法怎么用代码表示

SQL除法怎么用代码表示

SQL除法代码详解 前言一、除运算&#xff08;关系代数&#xff09;二、第一题&#xff1a;2.1导入数据到SQL Server&#xff1a;2.2理解&#xff1a;2.2.1代码&#xff1a;2.2.2↑代码理解和答案&#xff1a; 三、第二题&#xff1a;求使用了同“供应商S1所供应的全部零件”相同…
阅读更多...
VUE实现SQL在线编辑器，SQL分析器，SQL代码关键字提示

VUE实现SQL在线编辑器，SQL分析器，SQL代码关键字提示

1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件 npm install --save codemirror npm install --save sql-formatter2、然后引入该文件 import codemirror/theme/ambiance.css import codemirror/lib/codemirror.css import codemirror/addon/hint/show-hint.cssc…
阅读更多...
数据库SQL（基础代码）

数据库SQL（基础代码）

启动、连接、断开和停止MySQL服务器 通过系统服务器和命令提示符（DOS）都可以启动、连接断开和停击MySQL，操作非常简单。 1.启动、停止MySQL服务器   启动、停止MySQL服务器，的方法有两种：系统服务器和命令提示符（DOS）。 (1)通过系统服务器启动、停止MySQL服务器   …
阅读更多...
推荐文章

Copyright @ 2022~2023