如何在webpack中搭建项目(如何在webpack项目中调试loader插件)
类别:编程学习 浏览量:1196
时间:2021-10-24 10:45:18 如何在webpack中搭建项目
如何在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插件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- webpack打包公共文件(webpack文件打包错误异常)
- webpack常用的配置(webpack-dev-server搭建本地服务器的实现)
- 前端webpack方面的优化(webpack的移动端适配方案小结)
- webpack源码解析(80行代码写一个Webpack插件并发布到npm)
- webpack打包后css路径(Webpack 中 css import 使用 alias 相对路径的方法)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- webpack配置项流程先后顺序(Webpack中publicPath使用详解)
- webpack打包后的代码(webpack几种手动实现HMR的方式)
- 如何在webpack中搭建项目(如何在webpack项目中调试loader插件)
- vscode报错提示框(关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题)
- typescript开发后端(教你使用webpack打包编译TypeScript代码)
- webpack打包分析(webpack代码分片的实现)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
热门推荐
- python random函数在哪个包(Python3.5内置模块之random模块用法实例分析)
- hive数值转字符串(hive中将string数据转为bigint的操作)
- php的数据类型约束的好处(PHP中的Iterator迭代对象属性详解)
- nodejs登录案例(利用Node.js创建一个密码生成器的全步骤)
- vmwaredeepin安装(vmware虚拟机安装deepin20最全详细过程)
- css的内外边距均设置为0(详解css边距重叠的几种解决方案)
- css3实现3d效果教程(纯 CSS3实现的霓虹灯特效)
- dedecms官方安装手册(Linux下安装DedeCMS及安全设置教程)
- js数组去重复
- ocr公式识别python(初探利用Python进行图文识别OCR)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9