解析webpack——模块化历史与webpack的诞生

前言

本文将通过前端模块化发展历史引入webpack出现的原因，解决的问题，以及目前的困境。

至今，前端模块化已经发展了有十余年了，总结起来，它们解决的问题主要有三个

• 外部模块的管理
• 内部模块的组织
• 模块源码到目标代码的编译和转换

如果对模块化历史感兴趣，推荐阅读前端模块化的十年征程

一些标志性工具诞生时间线：

生态	诞生时间（年）
Node.js	2009
NPM	2010
requireJS(AMD)	2010
seaJS(CMD)	2011
broswerify	2011
webpack	2012
rollup	2018
vite	2020
snowpack	2020

前端模块化历史

在刀耕火种的年代，如果我们需要在项目里使用某个外部模块，我们可能会去官网直接把文件下载下来放到项目中，同时在入口html中通过script标签引用它。
后来NPM出现了，它是一个Node自带的模块管理工具。万千前端开发者们可以通过npm publish的方式将自己的模块发布到NPM上去。当需要引用外部模块时，通过运行npm install [模块名]，可以将别人的模块下载到自己项目根目录中一个叫node_modules的子目录下。
我们可以通过配置化的文件指定引入的依赖版本，也就是package.json文件。这就解决了外部模块管理的问题。

这个时期，我们使用script标签引入模块，一些模块需要通过一个“立即调用的函数表达式”(IIFE)去组织。

<script>
  var module1 = (function