2019 年的前端技术栈，无论你是用 Vue 还是用 React ，应该都离不开一样工具 – webpack。webpack 极大的简化了前端开发的构建过程，只需提供一个入口文件，webpack 就能自动帮我们分析出相关依赖，构建出 bundle 包。

webpack 很强大，但是大家知道 webpack 到底是怎么样打包的吗？本文将从一个很简单的例子，一步步带领大家探寻 webpack 打包的基本原理。

本文将会介绍如何将自己写的组件库打包成第三方库，发布到 npm 上，同时支持在原生 js / React/ Vue 下使用。Webpack4 的升级指南可以参考下 Webpack4.0 升级配置，本文不做赘述。

本文基于 webpack 4.8.1

吐槽

webpack 彪版本号的速度真是飞快，4.0 发布没多久上去看的时候才 4.1.*，现在已经刷到 4.8.1 了，给人一种“我版本号很高了，可以安心升级了”的感觉，然而坑依然很多…尤其是 API 文档，到处可见 3.0 的陈旧信息。Code Splitting 章节点进去依然在讲 CommonsChunkPlugin ，CommonsChunkPlugin 点进去提示去看 SplitChunksPlugin，看文档的时候经常会迷失自我，心累…好了，吐槽完毕，下面是正文。需要直接复制粘贴的同学直接拉到最后~