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

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

最近需要做一个纯静态网站，因工作量比较少，功能又不复杂，上 webpack 觉得太麻烦了，加上早就对 parcel 种草，所以这次决定试用一下号称零配置的 parcel 。

1

npm i -D eslint eslint-config-alloy eslint-config-prettier eslint-plugin-react prettier prettier-eslint

.eslintrc.js

1
2
3
4
5
6
7

module.exports = {
    extends: [
        'eslint-config-alloy/react',
        'eslint-config-prettier',
        'eslint-config-prettier/react',
    ],
};

.prettierrc.js

1
2
3
4
5
6

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    semi: true,
    tabWidth: 4,
};

目前主流的前端框架在开发的时候都采用最新的 ES6+ 语法，大部分的向下兼容工作都交给了 Babel 来处理。通过引入 Babel 插件，我们可以大胆地使用最新或是正在起草中，甚至是根本不在标准中的 jsx 等语法，跟甚至是你自己胡诌的写法！

本文将带大家了解 Babel 是怎么工作的、Babel 插件是怎么工作又是怎么编写的，并写一个与 webpack 集成的最简单的 Babel 插件。

本文将会介绍如何将自己写的组件库打包成第三方库，发布到 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，看文档的时候经常会迷失自我，心累…好了，吐槽完毕，下面是正文。需要直接复制粘贴的同学直接拉到最后~