工程化

webpack

webpack 核心功能

1. 编译浏览器无法理解的东西（e.g. es6,ts, vue）
2. 代替手动操作（e.g. 文件合并和拆分，图片压缩，资源处理）
3. 帮助开发（e.g. 开发模式）

webpack 包含哪些核心模块

1. entry（入口）：指示 Webpack 从哪个文件开始打包
2. output（出口）：指示 Webpack 打包完的文件输出到哪里去，如何命名等
3. loader（加载器）：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
4. plugins（插件）：扩展 Webpack 的功能
5. mode（模式）：主要由两种模式：

• 开发模式：development
• 生产模式：production

Webpack 常见的 Loader

• file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件（Webpack5 有自己的方法）
• url-loaderr：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去（Webpack5 有自己的方法）
• sass-loader: 把 Sass 编译成 CSS
• css-loader：让 webpack 识别 CSS
• style-loader：把 CSS 写入 JS,执行后作为 style 标签插入到 html ⽂件中
• postcss-loader: 扩展 CSS 语法，⽐如⾼阶的选择器、⾼阶的 CSS 属性、⾼阶的 CSS 值
• image-loader：加载并且压缩图⽚⽂件
• babel-loader：把 ES6 转换成 ES5

注意：在 Webpack 中，loader 的执行顺序是从右向左执行的。因为 webpack 选择了 compose 这样的函数式编程方式，这种方式的表达式执行是从右向左的。

常见的 Plugin

1. html-webpack-plugin：简化 html ⽂件创建

2. copy-webpack-plugin: 拷贝文件

3. clean-webpack-plugin: 删除（清理）构建目录

4. eslint-webpack-plugin: 通过 ESLint 检查 JavaScript 代码

5. mini-css-extract-plugin: 提取 CSS 为独立的文件

6. css-minimizer-webpack-plugin: 压缩 CSS

splitVendorChunkPlugin 的作用？

把第三方包打成一个 vendor，和业务代码分开，可以充分利用浏览器缓存。

什么是 tree shaking?

把没有用到的代码给删掉，但是前提要使用 es6 module

webpack 缺点

1. 打包速度慢
2. 即使支持了动态模块热重载（HMR），随着应用规模的增长而显著下降

bundle，chunk，module 是什么？

• bundle：是由 webpack 打包出来的⽂件；
• chunk：代码块，⼀个 chunk 由多个模块组合⽽成，⽤于代码的合并和分割；
• module：是开发中的单个模块，在 webpack 的世界，⼀切皆模块，⼀个模块对应⼀个⽂件，webpack 会从配置的 entry 中递归开始找出所有依赖的模块。