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的原创文章，请关注公众号"汪子熙":

webpack打包过程如何调试？相关推荐

webpack打包工具不会用，那是因为你没看过这篇
webpack打包工具一.认识webpack 1. 前端模块化 2.打包如何理解呢? 3.和grunt/gulp的对比二.webpack的安装三.webpack的起步 1.准备工作 2.js文件 ...
Webpack打包-打包详细流程
Webpack Webpack是一个现代化的静态模块打包器,支持JavaScript.CSS.图片等资源的打包.它将所有模块及其依赖项视为静态资源,并创建一个依赖关系图,将这些资源转换为有效的输出文 ...
webpack打包神器（一）（再看webpack）
之前已经记录过一些零零碎碎的webpack知识点,今天又温习一遍 1.先来说模块化就是将一个复杂的系统分解成若干个系统方便编码 2.自动化构建构建的目的就是将源代码转换发布为线上可以执行的代码,内 ...
webpack打包jquery多页_Webpack打包与程序调试
Webpack终于打包成功了,也算发布了Demo,回头继续完善程序时,却发现用webpack打包后的程序却极难调试,也用了sourcemap选项,但依然难于调试,不报错,但自己代码本身功能实现有错时, ...
记一次 webpack 打包体积优化
手头做的项目开发得差不多了,而打包配置是一开始粗略配置的,不大的项目打包出来得6MB+,所以现在必须进行优化. 打包结果分析执行命令 webpack --profile --json > st ...
webpack5打包普通html项目,webpack打包其他资源
webpack打包其他资源文件图片打包 file-loader的使用 css内引入图片资源安装 npm install file-loader -D outputPath:图片文件打包的放在哪个文 ...
前端工程化（ES6模块化和webpack打包）
文章目录目标: 目录: 1.模块化相关规范 1.1.模块化概述 1.2.浏览器端模块化规范 AMD CMD 1.3.服务器端模块化规范 CommonJS 1.4.大一统的模块化规范-ES6模块化 1 ...
webpack 打包chunk
chunk的含义以及出现的情况 webpack特定术语在内部用于管理捆绑过程,输出束(bundle)由块组成. 是webpack 根据功能拆分出来的代码片段,包含三种情况官方: 1.入口起点:使用e ...
webpack打包工具及原理
一.Webpack Webpack 是一个用于现代JavaScript应用程序的静态模块打包工具,可以很方面的管理模块的恶依赖. 1.2.1 静态模块此处的静态模块指的是开发阶段,可以被 Webpa ...

webpack打包过程如何调试？

webpack打包过程如何调试？相关推荐

最新文章

热门文章