一、模块化发展史

1. 第一阶段

在 JavaScript 语言刚刚诞生的时候，它仅仅用于实现页面中的一些小效果。那个时候，一个页面所用到的 JS 可能只有区区几百行的代码。

一、浏览器端的模块化

问题：

• 效率问题：精细的模块划分带来了更多的 JS 文件，更多的 JS 文件带来了更多的请求，降低了页面访问效率
• 兼容性问题：浏览器目前仅支持 ES6 的模块化标准，并且还存在兼容性问题
• 工具问题：浏览器不支持 npm 下载的第三方包

webpack 是基于模块化的打包（构建）工具，它把一切视为模块

它通过一个开发时态的 入口模块 为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。

一、html-webpack-plugin

在前端迅速发展的今天，许多没有太多技术含量并且感觉是在浪费时间的事情，就可以交给构建工具来做，例如：我们去手动创建 index.html，手动引入打包好的 js 文件等操作，都可以叫 webpack来做，来帮助我们提升效率。

开发服务器

在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：

1. 编写代码
2. 控制台运行命令完成打包
3. 打开页面查看效果
4. 继续编写代码，回到步骤 2

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

一、图片

在这一点上，webpack4 与 webpack5 的版本会有很大区别，webpack5 新增了一种资源模块(asset module)

babel 一词来自于希伯来语，直译为巴别塔

巴别塔象征的统一的国度、统一的语言

而今天的 JS 世界缺少一座巴别塔，不同版本的浏览器能识别的 ES 标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦一样，前端开发也面临着这样的困境。

原链接 | 掘金