引入：

1.什么是模块化？

就是把业务代码或者工具代码 集成在一起

2.代码模块化有什么好处?

可以让工程程序:高内聚,低耦合

3.常见的模块化技术:

'var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'system'

'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp'

打包工具：webpack

打包工具的功能：

1.编译代码：

• 将新的js代码转换为旧的js代码
• 把 ts 代码变成 js 代码
• 引入其他类型的文件（比如：css文件）

2.压缩和“加密”代码：

• 把永远不会被运行到的代码删掉
• 把变量的名字变短，比如原来你有个变量叫 shaoshiBrother，打包之后就变成了 sb 或 s，也有可能叫 a
• 把多余的空格、空行删掉

打包工具产生的原因：

我们写代码都是采用模块化思想，让程序高内聚，低耦合，便于维护。打包工具将所有文件打包成一个静态文件，浏览器运行代码就会很快。

常见的打包工具： grunt 与 gulp、snowpack、parcel、esbuild、rollup、vite、webpack

我们为什么要使用webpack：

• 虽然臃肿，但不难用
• 速度不快，但可接受
• 功能多
• bug 少
• 非开箱即用,需要自己配置
• 最重要的是使用它的用户很多

面试题:

什么是webpack?

webpack 是一个打包模块化 javascript 的工具，在webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构建模块化项目； webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

webpack 与 grunt、gulp 的不同？

1、三者之间的区别 三者都是前端构建工具，grunt 和 gulp 在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用 gulp 来处理，比如单独打包CSS文件等

1.1grunt 和 gulp 是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个 web 的构建流程。

1.2webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展webpack功能。

2、构建思路的区别

2.1gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系

2.2webpack 需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工

3、 从知识背景区别

3.1gulp 更像后端开发者的思路，需要对于整个流程了如指掌

3.2webpack 更倾向于前端开发者的思路