[TOC] >[success] # 模块化打包工具 [前端模块化](https://www.kancloud.cn/cyyspring/more/921044) ~~~ 1.前端在整个历史的演变，最后提出的解决方案是'esm',使得前端可以解决以前模块化里程的各种 问题，这些问题解决的都是开发阶段多文件的划分的模块化，但是在实际正式环境然需要考虑下面几个问题 1.1.ES Modules 存在环境兼容问题 这个问题随着时间推移将会被解决 1.2.模块文件过多，网络请求频繁，影响工作效率，模块化导致问题就是我们会细致的划分文件，导致文件 请求变多，这个解决方法也可以通过http2 /http3 来解决 1.3.所有的前端资源都需要模块化，现有的'esm'只是把js 进行了模块化，但是前端是由'css','图片'.'字体' 这些个个文件组成，因此需要模块化的是前端所有资源不是单单的js文件 2.解决上面问题就需要引入新的前端开发工具 2.1.新特性代码编译，将包含新特性代码转换成大多数浏览器能够兼容的代码 如ES6 => ES5，这些 可以通过glup 这些自动化构建工具帮助实现 2.2.解决文件过多，导致请求过多的问题，我们可以设想在开发阶段依旧是模块化多文件的形式，但是 在打包的时候，可以讲过这些模块化的文件打包成一个文件 2.3.支持不同种类的前端资源类型，可以将其当作模块使用 ~~~ * 针对上面1.2补充 ~~~ 1.首先明确一个前提模块化开发只是在开发阶段需要的，实际业务上线后对项目正常运行抛开优化来说本质是 没有影响的，如果采用过多的模块化开发，就以浏览器支持的'esm' 的形式为例因为模块划分越细导致浏览器 请求越多反而可能出现速度变慢的情况，这就是为什么我们需要打包工具有时候将一些js 文件统一生成一个 'Bundle.js' 2.下面做一个案例说明,虽然看似之引入了一个'script' 标签但实际相互关联的esm 依旧会加载 ~~~ ~~~ └─ 02-configuation ├── src │ ├── heading.js │ └── index.js └── index.html ~~~ ~~~ // ./src/heading.js export default () => { const element = document.createElement('h2') element.textContent = 'Hello webpack' element.addEventListener('click', () => alert('Hello webpack')) return element } ~~~ ~~~ // ./src/index.js import createHeading from './heading.js' const heading = createHeading() document.body.append(heading) ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack - 快速上手</title> </head> <body> <script type="module" src="src/index.js"></script> </body> </html> ~~~ ![](https://img.kancloud.cn/2b/8c/2b8c87969709739423681abf04667ca4_448x148.png) * 根据上面说的可以思考得到一个模型图 ~~~ 1.我们将'js' 模块化的代码在打包生成阶段编程es5语法，并且将他们这些模块化后会导致请求文件变多的'js' 统一给他们生成在一个js文件中'Bundle.js',并且不单单的对js 进行模块化，会对不同种类的前端资源类型支持 就像'css' ,'图片'，'文字' ~~~ ![](https://img.kancloud.cn/64/73/6473f1170b47cdbe61090ef597ca4749_1267x681.jpg) >[danger] ##### 模块化工具所具备 ~~~ 1.根据上面分析后整个模块化工具期望具备的雏形 1.1.能够将散落的模块打包到一起； 1.2.能够编译代码中的新特性； 1.3.能够支持不同种类的前端资源模块。 ~~~ >[danger] ##### 前端模块化工具 ~~~ 1.webpack - 模块打包器 2.rollup - ES Modules 打包器 ~~~ * 打包工具关于webpack 官网的介绍可以看出，如果涉及更多的类型文件打包优先选webpack ![](https://img.kancloud.cn/d0/ae/d0ae1d050321cf9b8a6fac2751a46041_734x125.png) >[danger] ##### 我从哪里知道这些知识的 [知识获取位置](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2262)