这是我参与「第五届青训营 」伴学笔记创作活动的第29天，前几天我们学习了Webpack，下面就是我做的Webpack的课堂笔记：

前言

我们为什么要学习Webpack？因为它是高阶前端的必经之路，有助于我们理解前端“工程化”概念、工具、目标。

什么是Webpack

Webpack在本质上是一种前端资源编译、打包工具。

使用Webpack

在正式使用Webpack之前，我们还需了解Webpack的工作流程，这样可以更好地了解Webpack。Webpack的工作流程可以极致收缩为四步：1.入口处理 2.依赖解析 3.资源解析 4.资源合并打包。 这个图中有对极简四步的详细解析。那么如何使用Webpack？对于它的使用基本都围绕着配置展开，这些配置大致可以分为两类：流程类（作用于流程中某个或多个环节，直接影响打包效果的配置项）和工具类（主流程之外，提供更多工程化能力的配置项）下面两张图是两类配置的图解：

第二张图的下面那一部分是关于工具类的配置。要使用Webpack 就像下图一样声明入口entry，声明产物出口output，然后运行npx webpack即可。这三步完成就代表Webpack完成 。 下面就是如何使用webpack处理CSS：webpack是不能直接识别css资源的，一定要通过loader资源来帮助webpack解析样式资源，如果在src文件夹下建立一个css文件夹写入index.css文件，然后main.js文件当中引入文件，然后npx webpack就会报错

下面这几个问题是老师在课堂上留给学生们思考的，这里希望大家也去了解一下去对这些问题进行思考。 使用webpack接入babel（webpack和babel通常配合起来使用），babel是js编译工具，能将es6或者一些特殊语法做一些转换，只做文件转义，不做文件整合。webpack是一个打包工具，内置只能处理js，但是它可以加载很多的loader处理css、img、ts、vue等其他文件，最终输出js文件。webpack通过使用babel-loader使用babel。 生成HTML

使用webpack---HMR(Hot Module Replacement)模块热替代，允许在运行时更新各种模块，而无需对网页进行完全刷新 Tree Shaking（树震）：为减少最终构建体积而诞生。它是一种通过清除多于代码的方式来优化项目打包体积的技术。Tree Shaking不支持动态导入，只支持纯静态导入。

理解loader

webpack只认js，未处理非标准js资源，设计出资源翻译模块————loader 用于将资源翻译为标准js。使用loader。loader的内容有点多:loader详解 这是关于loader的一些问题，解决它们有助于更好的理解loaader

理解插件

插件是什么：插件是一种遵循一定规范的应用程序接口编写出来的程序，主要是用来扩展软件功能。插件架构的精粹是：对扩展开放，对修改封闭。理解插件，首先插件围绕钩子展开：

下面这个图要表达什么？读者可以猜一下：

学习方法

该方法是老师整理的：

小结

loader和插件是很重要的一部分，不可以忽略，下面还有老师整理的方法，努力吧，谢谢大家。