webpack-devtool

最新推荐文章于 2024-09-15 21:55:26 发布
最新推荐文章于 2024-09-15 21:55:26 发布
阅读量712 收藏
点赞数
文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43413883/article/details/123158690
版权
webpack-devtool通过资源映射帮助开发者在压缩打包后的代码中便捷定位原始代码，便于调试。官方提供了多种模式，适用于不同开发场景。详细配置参考官方文档。
摘要由CSDN通过智能技术生成

作用：

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 devtoo
最低0.47元/天 解锁文章
问丶心
关注
webpack-devtool-plugin
03-09
webpack-devtool-插件 帮助开发人员在线切换代理 安装 npm install webpack-devtool-plugin -D 用法 webpack.config.js plugins: [ + new DevToolsPlugin({ + proxyArr: [ + { value: "http://a.com" }, + { ...
configureWebpack devtool
weixin_35750953的博客
01-03 942
要配置 webpack 的 devtool 属性，你可以在你的 webpack 配置文件中添加一个 devtool 字段，并将其设置为你希望使用的源映射类型。例如： module.exports = {// ... devtool: 'eval-source-map', // ... }; 你可以使用不同的源映射类型来控制 webpack 如何生成源映射。一些常用的选项包括： eval...
webpack的配置
专研技术的大学生
09-05 1170
Webpack的配置详解
关于webpack使用chainWebpack配置方式配置devtool调试问题
weixin_42555713的博客
01-17 1083
关于使用webpack（chainWebpack）配置devtool出现配置失效问题
vue开发调试时，如何分离出源代码(devtool配置)
laozhong110的专栏
11-16 1949
vue不同版本/cli不同版本，在调试，源代码断点时，分离出源代码方便查看，配置大致一致，这里记录一下。 //vue.config.js 文件 module.exports = { /*一般在configureWebpack配置，不要在chainWebpack里头配置，这个配置好些与cli有关，可能无效*/ configureWebpack:{ devtool: "cheap-module-eval-source-map", output: { ...
项目开发过程中无法指向具体错误位置和调试信息
qq_43128392的博客
04-16 226
解决这个问题只需在vue.config.js文件中给configureWebpack配置 devtool: 'source-map' 即可。在项目开发中会常常遇到有报错，但是报错却指向到了压缩后或编译后的代码。
webpack-devtool-eval-issue
05-08
本篇文章将深入探讨 `webpack-devtool-eval` 问题以及与 JavaScript 开发相关的知识点。 `webpack-devtool` 是 Webpack 的一个配置选项，用于控制源映射（source map）的生成方式。源映射允许我们在浏览器的开发者...
webpack之devtool详解
08-28
Webpack 之 Devtool 详解 在使用 Webpack 进行项目构建时，Devtool 是一个非常重要的选项，它控制着源映射的生成方式。源映射是一种将编译后的代码映射回原始代码的技术，可以帮助开发者在调试过程中快速定位问题。...
vue-component-devtool:Vue 组件开发模板
05-14
基于 webpack 的 Vue 组件开发工具。可以编写例子，文档。usegit clone https://github.com/mengdu/vue-component-devtool my-component安装依赖yarn# ornpm install功能打包vue组件，导出 umd 模式支持 markdown ...
【webpack4系列】设计可维护的webpack4.x+vue构建配置（终极篇）
最新发布
mengran_code的博客
09-15 2100
一个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去，tree shaking 就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在uglify 阶段被擦除掉。uglify阶段：将 JavaScript代码进行压缩、混淆，并去除一些不必要的代码，从而减小文件体积。webpack4及以上默认内置了，当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法，CJS 的⽅式不⽀持。
一文彻底搞懂webpack devtool
octopus的专栏
03-31 3996
为什么需要Source Map 首先根据谷歌开发者文档的介绍，Source Map一般与下列类型的预处理器搭配使用： 转译器（Babel） 编译器（TypeScript） Minifiers（UglifyJS） 为什么呢？因为通常我们运行在浏览器中的代码是经过处理的，处理后的代码可能与开发时代码相差很远，这就导致开发调试和线上排错变得困难。这时Source Map就登场了，有了它浏览器就可以从转换后的代码直接定位到转换前的代码。在webpack中，可以通过devtool选项来配置Source Map
分享一篇webpack中devtools得详解
qq_38935512的博客
03-08 305
https://www.cnblogs.com/tugenhua0707/p/9464984.html
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）
12-09 1052
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）
webpack笔记（ 六 ）- webpack.config.js之devtools
前端攻城狮Dannis
08-08 1287
目录: source map 源码地图 webpack的source map source map 前端发展到现阶段, 很多时候都不会直接运行源代码, 可能需要对现有源代码进行合并, 压缩, 转换等操作, 真正运行后的是转换后的代码 这就给调试带来了困难, 因为当运行发生错误时, 我们可能得不到我们想要的错误信息 在src下新建index.js // index.js console.log('right'); console.log(a); // a是未经声明就去输出的肯定会报错 npx w
详解 Webpack devtools
自然醒
10-08 614
最近在开发一个低代码平台，主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发，而第三方组件想要接入平台，需要经过我们特定的打包工具来 build。构建之后的组件，会合并成单个的 js 文件，而且代码会被压缩会混淆，这个时候如果需要调试，那就会极其痛苦。想要有一个好的调试环境，就要涉及 SourceMap 的输出，而 Webpack 的 devtools 字段就是用于控制 SourceMap。 SourceMap 原理 在详细解释 devtools 配置之前，先看看 SourceMap 的原理。S
webpack——devtool配置及sourceMap的选择
zwkkkk1的博客
03-23 6782
官方手册传送门 官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。 不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。 1. 什么是 source map 现在的前端代码会通过babel编译或者各类的...
vue5.0报错[webpack-cli] Error: Unknown option '--inline'
07-08
Vue 5.0 中的错误提示 `[webpack-cli] Error: Unknown option '--inline'` 是由于 `--inline` 选项在 Webpack 5 中已被移除引起的。 在 Webpack 5 中，`--inline` 选项被替换为 `--devtool inline`，用于设置开发工具的模式。您可以通过以下两种方式解决这个问题： 1. 在运行 Vue 5.0 的开发服务器时，将 `--inline` 选项替换为 `--devtool inline`。例如，如果您使用的是 Vue CLI，可以将命令修改为 `vue-cli-service serve --devtool inline`。 2. 如果您在项目的 Webpack 配置文件中手动使用了 `--inline`，则需要将其替换为 `devtool: 'inline'`。在 Webpack 配置文件中找到相关的配置项，并将其修改为： ```js module.exports = { // ... devtool: 'inline', // ... }; ``` 完成上述更改后，再次运行 Vue 5.0 的开发环境命令，应该不再出现 `[webpack-cli] Error: Unknown option '--inline'` 错误。 如果您还有其他问题，请随时提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问丶心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值