hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

调试webpack

2019-11-18杂谈搜奇网37°c
A+ A-

调试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开辟了一个小游戏,感兴趣的朋侪一个能够来玩玩

有喜好聊手艺朋侪也迎接入群,若二维码失效可加我微信复兴前端

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
调试webpack

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282390.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>