本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容，可想而知webpack的重要性。然而由于vuecli的出现，我们不再把更多的重心放到webpack的配置，导致对webpack的配置以及优化逐渐失去了自己的认识，本篇文章将从基础配置入手，带大家了解webpack的核心；

🥇 准备

首先我们需要在项目的根目录创建webpack.config.js文件用于webpack的配置，Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范；其五大核心为：entry、output、module、plugins、mode；代码如下所示

🥇 开发模式的配置

开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事：1、编译代码，使浏览器能识别运行开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源代码质量检查，

2、树立代码规范提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

处理html资源 plugin

1、处理css样式资源

由于Webpack是不能解析样式资源的因此我们需要借助loader去帮组webpack解析样式资源；官方文档有对应的loader模块，我们可以参考官方文档进行loader的配置；链接如下： webpack----------Loader地址第一步下载loader，代码如下所示：

第二步在配置文件中配置，代码如下所示

对less、sass、style资源的处理和css资源的处理雷同，不再累述，查看官方文档进行配置即可;

2自动清空上次打包的配置

由于每次在打包资源之前我们都需要手动删除dist目录下的打包文件，非常麻烦，因此需要配置每次打包之前先清除dist目录下的资源再进行打包，配置代码如下：

3、处理图片资源

在Webapack4我们需要对一个两个loader对图片资源处理图片，而webpack5已经将处理图片的loader内置处理了，现在只需要进行简单配置就能处理图片资源，配置代码如下所示：

4、字体图标资源的处理

对于字体图标的处理和图片资源的处理类似，因为webpack内置的有loader解析，我们只需要简单的配置即可，配置代码如下：

注意：📣 type: "asset/resource"和type: "asset"的区别： type: “asset/resource” 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理 type: “asset” 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式❗❗❗