这是我参与「第五届青训营 」笔记创作活动的第15天
今天的视频课 [Webpack定义解析]及[Webpack使用方法]主要就是解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识，介绍完 Webpack 是什么之后，将主要带来 Webpack 的使用方法，帮助同学们从理论到实践，能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。
我把今天老师视频讲解的知识进行了整理和概括，具体内容如下：
1.webpack定义解析
既然要学习这么一个工具，那我们先仔细思考一下我们为什么要学习webpack呢？我总结了以下几点原因：
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
前端项目是由各种资源组成的如：JS、CSS、Vue、Less、WEBP等，开发中我们就会管理这些资源，但是在以前是手动管理这些资源，所以会遇到各种问题：
- 依赖手工，操作过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- JS、图片、CSS资源管理模型不一致
这些都是旧时代非常突出的问题，对开发效率影响非常大，直到很多工程化工具的出现，才解决了这些问题。webpack也是其中一种，它本质上就是一种前端资源编译、打包工具。
2. 使用webpack
下面我们来介绍一下怎么使用webpack。先安装配置好webpack，具体步骤如下：
- 安装 使用命令
npm i -D webpack webpack-cli - 编译配置文件，例如：
3.执行编译命令
npx webpack
webpack的核心流程简化过后还是比较简单的，如下：
接下来开始使用webpack，其实它的使用方法基本都是围绕配置展开，而这些配置大致可以划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
它的流程类配置主要以下图所示：
使用webpack来处理CSS，步骤如下：
- 安装Loader
npm add -D css-loader style-loader - 添加
module处理CSS文件
实现效果：
使用webpack接入Babel，步骤如下：
- 安装依赖
npm i -D @babel/core @bable/preset-env bable-loader - 声明产物出口
output - 执行
npx webpack
实现效果如下：
使用webpack生成HTML，步骤如下：
- 安装依赖
npm i -D html-webpack-plugin - 声明产物出口
output - 执行
npx webpack
实现效果如下：
当然除了这些作用以外，webpack还能作用HMR、实现Tree-Shaking等等，在此我不再赘述，感兴趣的同学下来自行了解。
