缘起
一直在纠结要不要发这个文章，因为现在这个方案除了少数需要线上IDE的公司能用到，大部分公司其实不值得花费大量人力物力去搞这个，因为我一直认为技术是更好的为公司业务做服务的，发的文章最好是大家能用的上的！
为啥我最后还是决定发这个文章呢，因为小编每次写文章前都会进行摇号，最终摇上了这个文章，所以按照规则发一发吧！
题目解析
我们知道webpack其实很大程度上利用了node的能力，那么这个标题其实可以转化为如何让浏览器拥有node的能力。去年的时候，因为公司业务的关系，我做过类似测试，发现node的模块在浏览器上是阉割过的！这个其实分两步看，第一步我们可以用浏览器的一部分能力替代node部分模块，第二步是我们可以找对应的库替代node的其他模块，从而在浏览器上实现node的能力！
webpack如何跑起来的
这个问题其实就是webpack的运行原理，这里不详细介绍，大致说下原理：通过入口文件，和一些列配置的规则，把源文件通过编译后转化成对应的js等文件，进行输出！
webpack在node环境和浏览器环境
这块我在听了一群大佬的分享之后，明白了自己与大佬之间的差距，同时也知道了应该如何在浏览器环境处理这个问题！
其实主要是以下几点比较重要：
- 内置模块加载，比如path,resolve,http,vm等
- 文件系统，打包处理各个源文件
- 按需加载，处理node_modules等按需加载的文件
- 优化
内置模块加载
这个是可以通过三方的库来处理，大家可以自己去搜下，例如node的path模块，浏览器可以用path-browerify进行polyfill。
文件系统
说白了就是浏览器cpu，内存资源有限，必须进行告诉读写。我们就可以利用上面的浏览器的一些能力和模拟的node的某些模块，获取文件的相应信息，童鞋们可以理解为此时的浏览器已经拥有了大部分node的能力，可以读写文件，这里推荐下Memfs，webpack-dev-server就是用它作为核心，因为它在读写文件的时候是buffer处理，我们需要做的是写个方法，让它能高速处理文件即可！具体方法如何写，大家可以参考下node的fs模块，就是通过路径找到对应的文件，没有文件就创造文件，然后把内容直接赋值即可，在文件的stat上加上时间戳等属性即可！
按需加载
这里不过多介绍，大家可以引用node中的模块，lib目录下的cjs下的loader.js，进行处理，看看node还是蛮人性化的！
优化
浏览器运行webpack的时候，因为浏览器是单线程会卡顿，所以我们为了ui的流畅，建议开个子线程，使用Worker，用postMessage把打包结束的结果传回来即可！
到上面这一步差不多了，我们需要再继续下一步，实时更新，即HMR实现，不然改一个地方，重新打包，不但耗费资源，客户体验也下降了！
解决方案也简单，对webpack HMR的更新文件做拦截，就是写写拦截器处理即可！也算是提高性能吧！
尾声
知难行易，很多事情就是去做了去试了才知道行不行！现在前端能做很多事，不再局限于页面开发，未来前端发展会更好!这里再次感谢所有大佬们的分享，解决了我不少困惑！大家如果喜欢小编的文章，多多关注啊！