因为webpack编译的思想是万无皆可JS，意旨所有web项目关联的资源文件，都可以通过js关联起来。然而又由于图片，样式这些本来和js八竿子打不到一起的，所以就有了各种loader来解决他们的关联性问题；

微前端是当下的前端热词，稍具规模的团队都会去做技术探索，作为一个不甘落后的团队，我们也去做了。也许你看过了Single-Spa，qiankun这些业界成熟方案，非常强大：JS沙箱隔离、多栈支持、子应用并行、子应用嵌套，但仔细想想它真的适合你吗？

最近在做一个工程化强相关的项目-微前端，涉及到了基座项目和子项目加载，并存的问题；以前对webpack一直停留在配置，也就是常说的入门级。这次项目推动，自己不得不迈过门槛，往里面多看一点。

虽然在工作中用react+antd写页面写了一年，但从来没自己去认认真真配置一个webpack，去分析去优化自己打出的包。在工程化成熟或者大点的公司，都有自己的打包工具，所以自己工作中很少去琢磨这些。为了试一下写出的组件库（antd-doddle）性能，就尝试自己去写一个webpack构建，真的是吓了自己一跳，流水账（tu）开始。

这并不是自己第一次发npm包， 所以这里没有多少入门的知识。在此之前已经有一篇前端脚手架，听起来玄乎，实际呢？，但这一次的npm包和上一次的不是一个概念，前者只是一个脚本工具，而这个npm包是日常开发中方法和组件的集合, 是一个库。在读本文前，假定你已经对npm包有一定概念，熟悉Babel编译和webpack打包的常规用法...

最近公司封装的构建库用多了，感觉自己正在一步一步的变傻，所以趁还没下雪，手脚还没长冻疮，没事还是自己折腾一下吧。本想记笔记，但没想到记笔记没法传图片。所以如果你看到了，就忽略了吧。o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o

大体上就分三层（当然随着你在生成项目配置的参数不同，项目结构可能会有不同），首先package.json里面的devDependencies属性里，包含了构建这个项目webpack所需要的各种依赖node包和执行项目的快捷指令配置，build文件夹是一些和webpack相关的配置，而config是一些和项目相关的配置，关于这两个文件下每个文件具体是干...