如何在webpack项目中调试loader插件

最近，在学习webpack使用时，发现webpack-replace-loader配置正则不起用，调试插件后才发现，search健值竟然不支持正则的写法，后有换成string-replace-loader插件，这个loader的search健值支持正则写法，问题得到解决。这里记录下loader的调试方法：

首先需要准备node环境

第一步：下载全局安装 node-nightly

npm install -g --save-dev node-nightly

第二步：添加调试命令

 "node-nightly": "node-nightly --inspect-brk  ./node_modules/webpack/bin/webpack.js",

第三步：命令行中运行 npm run node-nightly

第四步： 打开谷歌浏览器在url上输入 chrome://inspect/#devices

点击inspect 进入调试页面

第五步： 在vscode中的node_module里面找到loader的index.js文件，在module.exports函数里面加上debugger;

到此，可以按照平时调试js一样，调试对应loader脚本。

到此这篇关于如何在webpack项目中调试loader插件的文章就介绍到这了,更多相关webpack调试loader插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验. 1.webpack的核心概念 •Entry:入口,Webpack执行构建的第一步从Entry开始: •Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件.Webpack会从配置的Entry开始递归找出所有依赖的模块. •Chunk:代码块,一个Chunk由多个模块组

  • 50行代码实现Webpack组件使用次数统计

    50行代码实现Webpack组件使用次数统计

    背景 最近有个领导想让我们搭组件库,然后我就想知道目前项目中使用的三方组件库哪些组件使用频率最高.本来想去咨询小伙伴,但是小伙伴太忙了,只能自己弄了.我就想能不能通过 webpack 来实现我的想法 效果 我们是用的 @material-ui,下面是组件使用情况 实现 我们知道 loader 的 source是文件的静态字符串如下图 最快的方案通过字符串统计用正则的方式一把梭,但是这样会有问题就是如果注释部分有的话也会被统计进去就不准确,所以我们可以通过 AST 的方式来实现,关于 ast 的概

  • 使用Webpack构建多页面程序的实现步骤

    使用webpack搭建单页面程序十分常见,但在实际开发中我们可能还会有开发多页面程序的需求,因此我研究了一下如何使用webpack搭建多页面程序. 原理 将每个页面所在的文件夹都看作是一个单独的单页面程序目录,配置多个entry以及html-webpack-plugin即可实现多页面打包. 下面为本项目目录结构 . ├─ src │ └─ pages │ ├─ about │ │ ├─ index.css │ │ ├─ index.html │ │ └─ index.js │ └─ index

  • webpack -v报错解决方案

    webpack -v报错解决方案

    背景 想查看下webpack版本,但执行webpack -v报错 解决方案 步骤一:运行命令npm list --depth=0 -g 检测下webpack.webpack-cli等版本兼容情况 例如以上提示,你安装了webpack-dev-server@4.1.0版本,但你的webpack版本不匹配(提示版本过低),需安装v4.37.0以上的版本,或者直接安装v5.0.0版本(例如直接安装v4.37.0版本:npm install -g webpack@4.37.0) 步骤二:再次运行命令np

  • webpack代码分片的实现

    目录 背景 CommonsChunkPlugin splitChunks 配置 异步加载资源 总结 背景 实现高性能应用其中最重要的一点就是尽可能地让用户每次只加载必要的资源,优先级不要太高的资源则采用延迟加载等技术渐进式地获取,这样可以保证页面的首屏速度.代码分片是webpck打包工具所特有的一项技术,通过这项功能可以把代码按照特定的形式进行拆分,使用户不必一次全部加载,而是按需加载. CommonsChunkPlugin 虽然这个插件在webpack4当中已经不推荐使用,但是我们还是要了解一

  • 80行代码写一个Webpack插件并发布到npm

    80行代码写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个插件实现的功能比较简单: 默认清除 js 代码中的 console.log 的打印输出: 可通过传入配置,实现移除 console 的其它方法,如 console.warn.console.error 等: 2. Webpack 的构建流程以及 plugin 的原理 2.1 Webpack 构建流程

  • 如何在webpack项目中调试loader插件

    如何在webpack项目中调试loader插件

    最近,在学习webpack使用时,发现webpack-replace-loader配置正则不起用,调试插件后才发现,search健值竟然不支持正则的写法,后有换成string-replace-loader插件,这个loader的search健值支持正则写法,问题得到解决.这里记录下loader的调试方法: 首先需要准备node环境 第一步:下载全局安装 node-nightly npm install -g --save-dev node-nightly 第二步:添加调试命令 "node-nig

  • webpack项目中使用vite加速的兼容模式详解

    webpack项目中使用vite加速的兼容模式详解

    目录 前言 目的 要处理的问题 动手 共用 index.html 共用配置 兼容环境变量 自动导入 资源引入 svg-sprite-loader 替代方案 其他 效果 前言 随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待. vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着.

  • vue项目中引入vue-datepicker插件的详解

    项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选. 传统的input type='date无法做到,所以使用了这个插件来实现功能. 1.引入vue-datepicker loader:npm install vue-datepicker 2.引入moment loader:npm install moment --save 因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment: 3.在用到该插件的地方引入: import myDatepic

  • 如何在Maven项目中运行JUnit5测试用例实现

    本文演示了如何如何编写JUnit 5测试用例,在Maven项目中运行JUnit 5测试用例. 编写JUnit 5测试用例 如果你是Java开发者,那么对于JUnit应该就不陌生.JUnit是Java单元测试的基础工具. JUnit目前最新的版本是JUnit 5.x,但广大的Java开发者估计还停留在JUnit 4.x,因此有必要演示下如何编写JUnit 5测试用例. 引入JUnit 5依赖 相比较JUnit 4而言,JUnit 5一个比较大的改变是JUnit 5拥有与JUnit 4不同的全新的A

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

  • 如何在uniapp项目中使用mqtt

    如何在uniapp项目中使用mqtt

    由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即时通讯. 下面附上uniapp中引入mqtt的全过程: 一.uniapp插件市场的参考插件 https://ext.dcloud.net.cn/plugin?id=854 二.具体引入过程 1.安装mqtt和uuid 在uniapp项目根目录下分别运行安装mqtt和uuid的命令行,因为后面会用uuid生成mqtt的clientId,所以这边就一起安装了. npm install mqtt@3.0.0 npm install uui

  • 如何在Python项目中引入日志

    如何在Python项目中引入日志

    Logging模块的使用 简单使用 Logging 模块提供了一系列便利的函数 它们分别是 debug(), info(), warning(), error(), critical() import logging logging.debug('debug log test') logging.info('info log test') logging.warning('warning log test') logging.error('error log test') logging.cri

  • 在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方案如下所示: 1.在MyEclipse软件中找打-----windows----preferences,会出现一个如下图所示的界面: 2.在检索框输入一个validation----单击该validation节点,将对于JavaScript脚本的验证取消勾,然后点击Apply,一直yes就行. 3.

  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件

  • 在vue项目中使用codemirror插件实现代码编辑器功能

    在vue项目中使用codemirror插件实现代码编辑器功能

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示),具体内容如下所示: 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;&quo

随机推荐