调试webpack1。Abstract用过构建工具webpack的朋友应该都明白，几百行的配置内容就像大海中的小舟，无从寻觅。看文档查百度，看其构建的生命周期。到头来还是一头雾水。原因很简单，构建配置一般都是脚手架工具自动生成的。看似天天都在用，其实很少接触。直到有一天，当你发现社区的插件不能满足你的需求时，相信你会定制一款属于自己的插件。这时候就需要深入了解它的机理了。作为开发，调试代码一定是了解内部逻辑的最好方式。原文公众号地址npm和webpack都是基于nodejs的工具。所以最终它是调试节点。这里我介绍三种调试方法。需要提前准备好以下工具，vscode，googlechrome，使用npm初始化一个项目，名字叫webpacktest。需要源码的朋友可以关注公众号小元不小，回复webpackdebug。安装工程依赖npmi-Dwebpackwebpack-cli添加webpack配置文件，并在其中设置断点，调试器在其中。constpath=require('路径');调试器；module.exports={mode:'development',entry:'./src/index.js',output:{path:path.resolve(__dirname,'dist'),filename:"index.js"}};2.（方法一）使用vscode运行npm调试在新建项目的package.json文件的scripts项中添加一个key为debug的配置，内容如下..."scripts":{"build":"webpack","debug":"node--inspect-brk=5858./node_modules/webpack/bin/webpack"}...在vscode中，选择tuning选项卡，左上角的调试下拉框corner选择AddConfiguration并选择Node环境。vscode会自动生成一个launch.json文件，并将文件内容调整为如下内容{"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"build","stopOnEntry":true,"runtimeExecutable":"npm","runtimeArgs":["run","debug"],"port":5858}]}其中端口配置需要和inspect-brk配置的端口保持一致。stopOnEntry的意思是在代码运行的第一行加断点，点击开始调试按钮，可以进入如下界面，继续点击运行，可以进入配置文件设置的断点。左边的小红点是在vscode中直接加了断点。这个断点也是可断的。3.（方法二）使用vscode运行node调试。让我们仔细看看package.js文件中配置的调试脚本。它实际上运行的是node，所以我们想知道它是否可以不使用npm直接运行。经过测试，确实可以。回到我们的launch.json文件，将配置文件改为如下{"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"Node","stopOnEntry":true,"program":"${workspaceFolder}/node_modules/webpack/bin/webpack"}]}点击开始调试，还是可以得到和上面一样的调试结果方法一、这种方式没有package.json文件的约束。更容易也减少了出错的机会。4.（方法三）命令行结合Chrome调试在命令行输入命令node--inspect-brk./node_modules/webpack/bin/webpack。为了方便，我们还是使用vscode。运行效果如下打开chrome浏览器。在地址栏输入chrome://inspect/#devices，在界面中点击inspect，这时候就会出来熟悉的界面，和调试前端一样。点击后出现如下显示，就可以进入断点了。点击如下调试按钮，进入我们在配置文件中设置的断点。5.总结之前配置调试过webpack。有需要的时候查了半天的资料。想一想，还是总结分享一下。做开发的时候，每天接触很多，还是要多写点东西。仔细看文章，所谓的三种方法都是围绕命令node--inspect-brk./node_modules/webpack/bin/webpack。查资料的时候，最初得到的命令是node--inspect-brk./node_modules/.bin/webpack，这个命令会报错。欢迎感兴趣的朋友关注我的微信订阅号“小源不小”，或点击下方二维码关注。我会把自己多年开发中遇到的困难，以及一些有趣的功能发布出来，我的经验会一一发布到我的订阅号。如果需要本文的demo，可以在公众号回复webpackdebug。我没有事儿。我用cocoscreator开发了一个小游戏。有兴趣的朋友可以来玩。也欢迎喜欢聊技术的朋友进群。如果二维码失败，可??以加我微信回复前端
