webpack devtool详解

2024-06-16 23:56:54

前言

devtool也是之前常用的一个配置，我们稍微了解下吧，不研究太深，毕竟现在都不怎配置他。

内容

devtool是配置sourceMap的。
sourceMap大家都知道，我们本地或者测试环境出了错误，可以在source中迅速定位错误，用到的就是 .map (map文件)，这个文件中是源文件映射(主要是源文件代码)。但是我们在network中看不到.map文件的请求，盲猜一波是浏览器做了屏蔽，不让我们看这种请求。(毕竟是源码，我单独下载map文件是可以下载下来的)

接下来，当devtool被配置为以下各个值的时候，对应的source-map状态

source-map

产生一个单独的source-map(.map)文件，打包的js文件里面最下行有map文件的地址。功能最完全，但会减慢打包速度。

eval

每个 module 会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL，所以一个chunk文件可能有很多个module。

inline开头

source-map被base64转码后，放在打包的js文件里面最下行

hidden开头

打包后有.map文件，打包后的js中没有sourceMappingURL，也没有base64转码后的内容(这种配置我很懵，有啥用)

eval开头(不是eval)

打包后的js代码和Source Map内容混淆在一起，通过eval输出。

cheap开头

.map中的源码经过loader处理了，我们点击到source看的时候是ES3、4、5的代码。

总结

还有一些平常不太用到的没有写出来，先这样吧

webpack devtool详解相关推荐

webpack之devtool详解
网址:webpack之devtool详解开发环境推荐使用: 1.eval :每个模块使用eval()和//@ sourceURL执行.这是非常快.主要缺点是,它没有正确显示行号,因为它被映射到转换代 ...
webpack 配置详解
最近在学习webpack,边学边练习,下面是对一些应用到的属性.插件记录分享出来,也方便以后查找与复习,过程中碰到了一些坑,在注释中有说明: const path = require('path') ...
webpack使用详解
Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...
霖呆呆的六个自定义Webpack插件详解-自定义plugin篇(3)
霖呆呆的webpack之路-自定义plugin篇你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 有很多小伙伴在打算学写一个webpack插件的时候,就被官网上那一长条一长条的API给吓 ...
webpack配置详解
1.使用模式: (1).CLI模式:也就是命令行用户界面.例如: webpack example1.1.js bundle1.1.js 如果我们直接执行webpack,不加任何参数(且当前目录不存在配 ...
vue webpack 自动打开页面_vue中webpack技术详解
1.为什么要使用webpack: 因为我们想把资源整合.如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源,而index.htm ...
webpack配置详解一：mode模式
写在前面:该系列文章为本人笔记系列,仅用于学习交流! 一.准备一个基础的demo项目: 1.创建一个空文件夹A,以规范化命名: 2. 进入文件夹A创建一个src文件夹,用于存放源代码 3. 当前A文件 ...
webpack手摸手学习系列之配置详解的 entry、output、module、resolve、devServer 和 optimization
一.webpack 配置详解之 entry 创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...

最新文章

热门文章