webpack打包过程如何调试？

ephererid 发布于2019-08-23 12:33 / 2798人阅读

摘要：本文适用于已经会使用的前端开发人员，但是想进一步了解细节和进阶。搭好之后的项目结构如下图打开能看到字符串。下面介绍如何调试本身的打包过程。这个就是我们之前命令行里指定的参数然后点一下调试器里的继续执行，断点就提留在我们设置在里的断点了。

本文适用于已经会使用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/in...

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

GPU云服务器云服务器 Webpack打包分块 javascript如何调试如何调试javascript php接口如何调试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98725.html

Webpack实战 - 使用动态 entry 改善调试体验

摘要：本文相关代码已经存放在，可自行下载使用多入口复习的优势不言而喻，因此在实际应用中我们也常常使用它调试多入口应用，所谓多入口是指多个页面会使用多个入口文件，在官方教程介绍了如何配置这里指定了个入口文件，打包之后分别会在文件夹中生成个打包之后本文相关代码已经存放在 dynamic-entry，可自行下载使用 0. 多入口 (复习) webpack 的优势不言而喻，因此在实际应用中我们也常...

oogh 2019-08-20 13:35 评论0 收藏0
精读《如何编译前端项目与组件》

摘要：历史上由于是作为的替代品出现，当时要解决的问题是处理浏览器兼容问题，打包或，做一些公共资源替换，雪碧图等，最后可以顺带合并到一个文件，但模块化功能远远比弱，基本上只能合并，但不能理解模块概念。 1 引言说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如：通过 webpack / parcel / gulp 构建项目。通过 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 评论0 收藏0
React 历史项目维护与优化实践

摘要：本文介绍了作者接手维护一个中型历史项目时的一系列改进实践，包括模块结构拆分业务逻辑梳理打包优化等。代码中如菜单名称结构表单字段名等的各种硬编码配置分散在各处。最后，在提升面向开发者的打包体验方面，本次优化中主要实现的是与的解耦。本文介绍了作者接手维护一个中型 React 历史项目时的一系列改进实践，包括模块结构拆分、业务逻辑梳理、Webpack 打包优化等。背景这是一个 PC 的...

toddmark 2019-08-20 16:50 评论0 收藏0
gulp+webpack工作流探索

摘要：概述最近研究了下工作流，先说一下我司的情况，我司现在是端用直出，用构建，部分就不进行描述了，因为网上的构建方法都是很成熟的了。概述最近研究了下工作流，先说一下我司的情况，我司现在是pc端用php直出，h5用vuejs构建，vuejs部分就不进行描述了，因为网上的构建方法都是很成熟的了。以下是php直出，需要向后台同学提供html文件的构建方法。调试都是在本地调试的，调试完成后打包生...

fancyLuo 2019-08-22 10:35 评论0 收藏0