调试webpack

调试webpack

1. 摘要

用过构建工具webpack的朋友应该都体会，面对其几百行的配置内容如大海一小舟，找不到边。看文档查百度，对其构建的生命周期看了又看。最终仍是很茫然。缘由很简单，构建配置通常都是经过脚手架工具自动生成。看似天天在用，其实接触不多。直到有一天，发现社区的插件不能知足需求时，相信你必定会定制一个本身的插件。这时你须要完全了解它的机制，做为开发，调试代码必定是了解内部逻辑最好的方法。原文公众号地址

不论是 npm 仍是 webpack 都是基于nodejs的工具。因此最终是调试node。这里我介绍三种调试的方法。须要提早准备好如下工具

• vscode
• google chrome

使用npm初始一个项目命名为webpacktest。须要源码的朋友可关注公众号小院不小,回复 webpackdebug。安装项目依赖

npm i -D webpack webpack-cli
复制代码

添加webpack配置文件,并在其中使用debugger设置一个断点。

const path = require('path');

debugger;
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中选择调页签，在左上角调试的下拉框中选择添加配置，选择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

闲来无事，采用cocos creator开发了一个小游戏，感兴趣的朋友一个能够来玩玩

有喜欢聊技术朋友也欢迎入群，若二维码失效可加我微信回复前端