webpack打包过程的个人理解

刚从 angular1.x转到react上开发，打包也从gulp转移到了webpack上，发现 webpack比gulp复杂了很多。正在研究webpack的工作方式等。准备写一些关于对webpack的理解

 

2019.07.08 nodejs的调试

相关的文档也比较多，我根据自己的操作重新理了一下大纲。如果你之前没有调试过代码，看起来可能会有些不明白

1. 使用vscode。这个是后台直接调试，使用过java, vc的会比较熟悉

这个方法主要是添加调试的配置文件，如下。注意program要使用绝对地址（当前位置可以使用workspaceFolder代替）。args是你的JS文件中接收的参数列表，type, request不用动，是固定值，name随便。配制好后保存，然后从调试列表中选择刚才的配制就可以F5启动了

{
    "type": "node",
    "request": "launch",
    "name": "besheng",
    "program": "${workspaceFolder}\\main.js",
    "args": [
        "start",
        "param2"
    ]
}

2. 使用chrome。方便前台人员调试

主要命令: node --inspect-brk ./src/main.js para1_of_main para2_of_main

其中main.js是你要调试的JS文件，main.js前面的参数是node的调试参数（注意是两个“-”） --inspect-brk 告诉nodejs不要直接运行，实际上这个参数会让nodejs启动一个socket端口，监听第三方调试工具的连接。执行后命令行显示

Debugger listening on ws://127.0.0.1:9229/63083209-0a11-4e72-85fb-709c7ce1d128
For help see https://nodejs.org/en/docs/inspector

然后打开 chrome浏览器（其他浏览器没试过），在地址栏输入 chrome://inspect/#devices 会看到 Target一行，显示你运行的js，点击下面的inspect链接打开你熟悉的调试窗口。

你也可以先打开浏览器，再执行node --inspect-brk。只是在执行nodejs前浏览器中不显示target内容（即红色框）