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

react 开发环境下断点调试 :

 

• 打包后的文件图分析

• 

 

• 直接打开浏览器插件

    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

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