webpack-devtool

作用：

webpack会将js代码进行压缩打包，loader也会处理相应代码，打包后代码很难进行查看，这也使得开发人员调试时很难找到对应代码位置。此时可采用devtool，通过资源地图的方式，给出打包后代码到原始代码的映射，方便开发人员调试。

要点：

webpack官方给出了多种模式，模式间主要区别以及应用场景已经给出，下面是主要参考参数

参数名	参数描述	参数值
devtool	可以使用的devtool	根据基础模式可自行组合，基础模式有：(eval、cheap、module、inline、hidden、nosources)
performance	构建性能	性能主要分为2种：build:构建速度，rebuild：重构速度
production	是否建议生产环境使用	yes为官方建议生产环境使用
quality	devtool特性	特性主要有5种：bundle模块不分离；generated直接生成资源地图；transformed转化后资源地图；original：原始代码；lines：只有行信息
comment	devtool描述	见官方文档

示例：

module.exports = {/*** devtool目前有20多种，都是通过最基础的模式组合而成* 基础模式有：* (eval、cheap、module、inline、hidden、nosources) +'-source-map'*//*** eval会执行打包后的字符串* 字符串中包含了代码源文件位置的注释，同时告诉浏览器资源地图位置sourceURL* 然后将eval中内容放入资源地图中*/// devtool: 'eval'/*** 打包后代码无eval包裹* 资源地图将单独存放于*.map文件下，最终通过sourceMappingURL引入*/// devtool: 'source-map'/*** 三者几乎一致，都是将资源地图内联到打包文件中* 通过sourceMappingURL将资源文件做base64处理后引用* 所以这里又称作DataURL** cheap: 不包含列信息，指浏览器点击跳转资源地图时不会跳到对应列，只会到行的开头* module: 指资源地图不经过loader处理，看到的就是原始书写的代码*/// devtool: 'eval-source-map',// devtool: 'eval-cheap-source-map',devtool: 'eval-cheap-module-source-map',module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]}
}

官方文档：https://webpack.docschina.org/configuration/devtool/

webpack-devtool相关推荐

webpack devtool浅析
首先我们需要知道source map是什么?顾名思义资源映射,它做的就是维护打包处理后的代码与源代码之间的映射关系,只有映射的精确性则取决于webpack的配置项devtool,其决定了项目打包时是否 ...
一文彻底搞懂webpack devtool
为什么需要Source Map 首先根据谷歌开发者文档的介绍,Source Map一般与下列类型的预处理器搭配使用: 转译器(Babel) 编译器(TypeScript) Minifiers(Ugli ...
webpack——devtool配置及sourceMap的选择
官方手册传送门官方对devtool配置的定义很简单:选择一种 source map 格式来增强调试过程,不同的值会明显影响到构建build和重新构建rebuild的速度. 不过,什么是source ...
webpack devtool详解
前言 devtool也是之前常用的一个配置,我们稍微了解下吧,不研究太深,毕竟现在都不怎配置他. 内容 devtool是配置sourceMap的. sourceMap大家都知道,我们本地或者测试环境出 ...
webpack快速学习1
什么是webpack webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. webpack的特点 ...
webpack的sourcemap
js source map原理作用:主要用于调试,现在代码都会经过压缩混淆,这样报错提示会很难定位代码,sourcemap就是一个信息文件,里面存储着位置信息,也就是说,转换后的代码的每个位置,所对 ...
Webpack4 学习笔记六多页面配置和devtool
webpack 多页配置 webpack可以配置单页应用, 也可以配置多页应用. 区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个 webpack配置: const path = r ...
通过两个实例来理解 devtool: 'source-map' 是什么意思
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 正如标题所说,有时候, ...
webpack常用的插件集合
目录日常组件使用对ES6的解析插件 image: 如何将打包的时候将图片一并打包我们需要使用到这个 file-loader url-loader 更准确的说是资源的复制,不仅仅是image ...
atool-build脚手架分析与webpack打包原理详解
最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下.如果有不对的地方还烦请指正.不过 ...

webpack-devtool

作用：

要点：

示例：

webpack-devtool相关推荐

最新文章

热门文章