模块化打包工具 -- webpack · 前端工程化学习笔记

[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)