构建webpack知识体系|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第13天
前言
一个前端的项目是由各种各样资源组成的，这些资源可以是PNG、JPG、GIF、JS、TS、CSS、Less、Vue、JSX...各种文件，在旧时代，一个庞大的项目这些资源的数量与各种依赖关系十分难打理，很影响开发的效率，于是市面上就出现了很多解决这种问题的工具，而今天要分享的Webpack就是一个这样的工具，本质上Webpack就是一种前端资源编译和打包的工具。
使用webpack
- 安装（npm i -D webpack webpack-cil）
- 编辑配置文件（webpack.config.js）
- 执行编译命令（npx webpack）
安装webpack
编辑配置文件
执行编译命令
webpack的工作流程
webpack的配置
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
webpack的配置总览
流程类配置
使用webpack-处理CSS
- 安装Loader （npm add -D css-loader style-loader）
- 添加'module'处理css文件
- Loader的作用：webpack本身不会识别到非JavaScript文件，而Loader就相当一个打包的准则，将非JavaScript的文件转译成webpack所能够识别的JavaScript文件，像css-loader、style-loader就是将css文件转译为webpack的文件的准则。
使用webpack-接入Babel
- 安装依赖（npm i -D @babel/core @babel/preset-env babel-loader）
- 声明产物出口'output'
- 执行'npx webpack'
- Babel的作用：webpack只能识别绝大部分的JavaScript代码，有一些高级的JavaScript代码webpack识别不了，这个时候配置babel-loader，webpack就能根据babel-loader去处理这些高级代码，转化成能打包的代码。
使用webpack-生成HTML
- 安装依赖（npm install html-webpack-plugin -D）
- 声明产物出口'output'
- 执行'npx webpack'
- webpack生成HTML利用了webpack中的插件去实现，比起传统的手工维护HTML内容，利用插件自动打包可以更好的维护HTMNL，就好比传统的手工维护每次打包完HTML我们手动添加JS链接，当打包后的js入口文件名更改时我们又需要再一次修改index.html中的js，但是自动生成HTML就可以解决这个麻烦的操作问题
工程类配置
工具线
使用webpack-HMR（模块日替换）
可以实现边编译代码边看到效果的功能，提高开发效率
- 开启HMR
- 启动Webpack（npx webpack serve）
使用webpack-Tree-shaking
树摇（用于删除代码），在一个大项目中我们要引入许许多多的模块，但是某些模块，或者模块中的代码我们用不到，这时候我们就能去把这些个代码删掉，以此让我们项目更加轻量。
开启tree-shaking
- mode：production
- optimization.usedExports：true
深入认识Loader
Loader的链式调用
链式调用：Loader 之间按照配置的顺序从前到后(pitch)，再从后到前依次执行，从而形成一套内容转译工作流
