node+webpack+react 开发环境下断点调试打包监控进程相关

react 开发环境下断点调试 :

node+webpack+react 开发环境下断点调试打包监控进程相关_第1张图片

node+webpack+react 开发环境下断点调试打包监控进程相关_第2张图片

 

  • 打包后的文件图分析

  • node+webpack+react 开发环境下断点调试打包监控进程相关_第3张图片

node+webpack+react 开发环境下断点调试打包监控进程相关_第4张图片

 

  • 直接打开浏览器插件

    const OpenBrowserPlugin = require('open-browser-webpack-plugin')

    plugins: [

        new webpack.DefinePlugin({

            'process.env.NODE_ENV': JSON.stringify('development'),

            IS_DEVELOPMETN: true

        }),

        new OpenBrowserPlugin({

            url: `http://localhost:${PORT}/#/`

        })

    ],

  • 在打包第三方插件时

   比如jquery ztree等第三方的库,里面有CSS等文件,如果打包在webpack中,在路径引入CSS等都会出现问题,现在做法,是直接引项目中,不打包。

  • node 程序下的断点调试

       1.  webstorm下直接调试

               现在node 6以上高版本后,右键debug方式已经运行不起来

        2.  推荐用浏览器方式调试

             npm install -g node-inspector  

             E:\mywork-project\test-node-login-20181213\mock>node --inspect http.js

node+webpack+react 开发环境下断点调试打包监控进程相关_第5张图片

可以使用supervisor 保持node 进程一直存在

你可能感兴趣的:(前端开发,react断点调试,node进程守护,node调试,node,webpack)