Vue3组件化之webpack5篇(二)

加载图片案例准备

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：

file-loader

要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader

安装file-loader： npm install file-loader -D

配置处理图片的Rule：

文件的命名规则

有时候我们处理后的文件名称按照一定的规则进行显示：

这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：

我们这里介绍几个最常用的placeholder：

设置文件的名称

那么我们可以按照如下的格式编写：这个也是vue的写法；

设置文件的存放路径

当然，我们刚才通过 img/ 已经设置了文件夹，这个也是vue、react脚手架中常见的设置方式：

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

安装url-loader：npm install url-loader -D

url-loader的limit

但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

那么，我们如何可以限制哪些大小的图片转换和不转换呢？

认识asset module type

我们当前使用的webpack版本是webpack5：

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset module type的使用

比如加载图片，我们可以使用下面的方式：

但是，如何可以自定义文件的输出路径和文件名呢？

url-loader的limit效果

我们需要两个步骤来实现：

加载字体文件

如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的。

首先，我从阿里图标库中下载了几个字体图标：

在component中引入，并且添加一个i元素用于显示字体图标：

字体的打包

这个时候打包会报错，因为无法正确的处理eot、ttf、woff等文件：

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理；

认识Plugin

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；

首先，我们先安装这个插件：npm install clean-webpack-plugin -D

之后在插件中配置：

HtmlWebpackPlugin

另外还有一个不太规范的地方：

对HTML进行打包处理我们可以使用另外一个插件：npm install html-webpack-plugin -D

生成index.html分析

我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：

该文件中也自动添加了我们打包的bundle.js文件；

这个文件是如何生成的呢？

自定义HTML模板

如果我们想在自己的模块中加入一些比较特别的内容：

这个我们需要一个属于自己的index.html模块

自定义模板数据填充

上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时，我们可以添加如下配置：

DefinePlugin的介绍

但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

这是因为在编译template模块时，有一个BASE_URL：

这个时候我们可以使用DefinePlugin插件；

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值；

CopyWebpackPlugin

在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。

安装CopyWebpackPlugin插件：npm install copy-webpack-plugin -D

接下来配置CopyWebpackPlugin即可：

Mode配置

前面我们一直没有讲mode。

Mode配置选项，可以告知webpack使用响应模式的内置优化：

这几个选项有什么样的区别呢?

Mode配置代表更多