webpack基础知识

1、什么是webpack

webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目

2、Webpack的优点是什么？

1. 专注于处理模块化的项目，能做到开箱即用，一步到位

2. 通过plugin扩展，完整好用又不失灵活

3. 通过loaders扩展, 可以让webpack把所有类型的文件都解析打包

4. 区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展

3、webpack的构建流程是什么?

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

​ 1. 初始化参数：从配置文件读取与合并参数，得出最终的参数

1. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，开始执行编译

   1. 确定入口：根据配置中的 entry 找出所有的入口文件

   2. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

   3. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系

   4. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会

   5. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果

4、webpack_使用前_准备工作

1. 初始化包环境，得到package.json文件

2. 下载webpack等模块

3. 在package.json自定义命令，为打包做准备

5、webpack_更新打包_重新打包

1. 确保在src/index.js引入和使用

2. 重新执行yarn build打包命令

7、webpack_修改默认入口和出口

 

1. 新建webpack.config.js（webpack默认配置文件名）

2. 通过entry设置入口文件路径

3. 通过output对象设置出口路径和文件名

8、 webpack插件_自动生成html文件

1. 依赖html-webpack-plugin插件，yarn下载此插件

2. 在webpack.config.js配置文件写入即可

9、 webpack_打包css文件问题

1. 依赖html-webpack-plugin插件，yarn下载此插件

2. 在webpack.config.js配置文件写入即可

10、webpack加载器_打包css文件

1. 依赖css-loader和style-loader

2. css代码被打包进js文件中

3. style-loader会把css代码插入到head下style标签内

11、webpack处理图片_配置asset

1. webpack5，在rules里，针对图片文件设置type: asset

2. 小于8KB转base64字符串进js里，大于8KB输出文件

12、webpack加载器_打包less文件

1. 依赖less-loader和less模块包

2. 转换css后还需要css-loader和style-loader的处理

13、webpack处理图片_配置asset

1. webpack5，在rules里，针对图片文件设置type: asset

2. 小于8KB转base64字符串进js里，大于8KB输出文件

14、webpack处理图片_优点和缺点

1. 好处是减少浏览器发送的请求次数，读取图片速度快

2. 坏处是图片过大，转base64占空间会多30%左右

15、webpack处理字体图标文件

在webpack.config.js的rules里针对字体图标文件类型设置asset/resource，直接输出到dist下

16、webpack加载器_babel降级js语法

借助babel-loader和babel编译器，给webpack配置上

17、webpack_开发服务器概述

1. 打包在内存中，速度快

2. 自动更新打包变化的代码，实时返回给浏览器显示

18、webpack_开发服务器_基础使用

1. 确保下载了webpack-dev-server这个包

2. 在package.json配置自定义命令，然后启动即可

3. webpack-dev-server会给我们一个地址+端口浏览器访问即可看到在内存中打包的index.html页面

19、webpack_开发服务器_相关配置

1. 去文档查找配置项的名字

2. 在webpack.config.js的devServer选项里添加