webpack打包过程如何调试?

简介: webpack打包过程如何调试?

本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶。


首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hello world项目。


搭好之后的项目结构如下图:




打开index.html能看到Hello World字符串。




下面介绍如何调试webpack本身的打包过程。


假设我们的需求是想调试项目文件夹下的webpack配置文件:webpack.config.js


那么我们在里面设置一个断点:




1. 在当前webpack项目工程文件夹下面,执行命令行:


node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress


其中参数–inspect-brk就是以调试模式启动node:


会观察到输出:


Debugger listening on ws://127.0.0.1:9229/19421955-0f12-44c7-95da-fa5dd8384e04


For help see https://nodejs.org/en/docs/inspector




2. 打开Chrome浏览器,地址栏里输入chrome://inspect/#devices:




在弹出窗口点击超链接"Open Dedicated DevTools for Node.


此时在第一步的命令行窗口里,出现一行新的提示信息:debugger attached。




Chrome窗口弹出来了,断点停留在webpack.js第一行处。这个webpack.js就是我们之前命令行里指定的参数:node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress




然后点一下Chrome调试器里的“继续执行”,断点就提留在我们设置在webpack.config.js里的debugger断点了。


目录
相关文章
|
2月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
40 1
|
2月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
44 0
|
2月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
23 0
|
5月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
126 0
|
3月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
54 0
|
17天前
|
前端开发 JavaScript 开发者
深入了解Webpack:前端模块打包工具
深入了解Webpack:前端模块打包工具
8 1
|
19天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
4月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
20 0
|
4月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
20 0
|
4月前
|
测试技术 开发工具 开发者
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(上)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
30 0