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断点了。

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

使用密码记录工具keepass来保存密码

在第一章,曾经给过您建议,密码不要保存在文档中,那样不安全,如果密码很多而且又很复杂,人的大脑是不可能很容易记住的,只能记录下来,如果不能记在文档中那记在哪里呢...

4109
来自专栏云计算教程系列

如何在CentOS 7上使用InfluxDB分析系统指标

InfluxDB是一个时间序列,指标和分析数据库。时间序列数据库旨在解决存储在一段时间内进行的连续测量所产生的数据的问题。此数据可能包含系统指标(如CPU和内存...

1631
来自专栏极乐技术社区

『教程』微信小程序webview的使用

小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开...

1.6K9
来自专栏九彩拼盘的叨叨叨

Web Workers 介绍

有时候,我们写的脚本需要执行一些耗时的大计算量的操作。在脚本执行过程中,浏览器会出现冻结用户界面的情况(用户对页面进行操作,但浏览器没有响应)。

852
来自专栏nnngu

基于 React + Webpack 的音乐相册项目(上)

笔记仓库:https://github.com/nnngu/LearningNotes ---- 上一篇文章用爬虫自动下载了一些图片,这一篇就用这些图片做一个音...

3445
来自专栏nnngu

基于 React + Webpack 的音乐相册项目(上)

笔记仓库:https://github.com/nnngu/LearningNotes

28311
来自专栏web

记一次webpack打包优化

2366
来自专栏云计算教程系列

如何在CentOS 7上使用InfluxDB分析系统指标

InfluxDB是一个时间序列,指标和分析数据库。时间序列数据库旨在解决存储在一段时间内进行的连续测量所产生的数据的问题。此数据可能包含系统指标(如CPU和内存...

3323
来自专栏知晓程序

想开发小程序?先了解开发者工具怎么用 | 小程序接入指南

2024
来自专栏Puppeteer学习

实现node端渲染图表的简单方案

这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3、echa...

2692

扫码关注云+社区

领取腾讯云代金券