cookcyq__的博客

如果还没用过 Webpack 请先阅读再回头看本文。Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。

Webpack 是一款 JS 模块化开发的技术框架，其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。Webpack 拥有丰富的 plugins / loaders 插件生态圈，可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等，这也让 Webpack 至今仍然在许多项目中仍有一席之地。尽管现在的构建工具百花齐放，如 vite, vue-cli, craco, esbuild, glup, rollup。

Rollup工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。浏览器（代码通过 Script 标签引入）AMD（兼容 requirejs.js 框架）CommonJS（Node.js 代码通过 CJS 方式引入）UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）后面会提到每个命令的作用，这里了解即可。

AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。

目前网上大部分的打包流程都不能满足我的理解和需求，而官方的解释也只说明一半，这次我就干脆将 vite/vue-cli 这两者的打包流程详细梳理下。在 vue-cli 使用打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助命令 ，此命令会将入口文件打包成一个库吗，具体可参考官方解释接下来我会逐步详解如何构建属于自己的库。

Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。