Vue3依赖的Webpack打包其他资源（七）

牧云前端全栈
618 阅读5分钟

1.file-loader的使用

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

file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

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

我们项目中使用图片，比较常见的使用图片的方式是两种：

  1. img元素，设置src属性
  2. 其他元素（比如div），设置background-image的css属性

image-20220130014551153

image-20220130015452105

1.1.文件的命名规则

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

比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等

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

webpack.js.org/loaders/fil…

我们可以在文档中查阅自己需要的placeholder，介绍几个常用的：

  • [ext]： 处理文件的扩展名
  • [name]：处理文件的名称
  • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）
  • [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）
  • [hash:<length>]：截图hash的长度，默认32个字符太长了；
  • [path]：文件相对于webpack配置文件的路径

1.2.设置文件的名称

那么我们可以按照如下的格式编写（Vue也是如此处理）：

image-20220130015808919

image-20220130015838219

通过outputPath来设置输出的文件夹

2.url-loader的使用

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

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

image-20220130020349779

默认情况下url-loader会将所有的图片文件转成base64编码

所以我们打包后在dist文件夹中会看不见文件

2.1.url-loader的limit

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

是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程

较大的图片转换Base64反而会很大程度影响代码执行

我们url-loader有一个options属性limit，可以用于设置转换的限制

image-20220130020742413

3.asset module type

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader

在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader

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

  • asset/resource 发送一个单独的文件并导出 URL，可以通过使用 file-loader 实现
  • asset/inline 导出一个资源的 data URI，可以通过使用 url-loader 实现
  • asset/source 导出资源的源代码，可以通过使用 raw-loader 实现
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择，可以通过使用 url-loader，并且配置资源体积限制实现

3.1.打包图片

image-20220130122136680

如果要自定义文件输出路径和文件名

方式一：在output添加assetModuleFilename属性

image-20220130122346038

方式二：在Rule中，添加一个generator属性，并且设置filename

image-20220130122544354

url-loader的limit效果

需要两个步骤实现

  1. 首先将type修改为asset
  2. 添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

image-20220130122808224

3.2.打包字体

项目中经常可能会使用各种特殊字体和字体图标，需要引入对应文件

下载的字体图标文件

image-20220130123054624

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

image-20220130123517638

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

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

image-20220130123629239

4.Plugin

Webpack的另一个核心是Plugin

Loader是用于特定的模块类型进行转换

Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

4.1.CleanWebpackPlugin

前面我们修改webpack配置的时候每次都需要删除dist文件夹重新打包

我们可以借助CleanWebpackPlugin来帮助我们完成

安装：npm install clean-webpack-plugin -D

配置：

image-20220130124303521

4.2.HtmlWebpackPlugin

我们最终打包文件dist文件夹中是没有index.html文件的

在进行项目部署的时，必然也是需要有对应的入口文件index.html

所以我们也需要用HtmlWebpackPlugin对index.html进行打包处理

安装：npm install html-webpack-plugin -D

public/index.html

image-20220130125353061

image-20220130125116280

4.3.自定义模板数据填充

类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式

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

  • template：指定我们要使用的模块所在的路径
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息

4.4.DefinePlugin

上面打包还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

image-20220130125557561

但是我们并没有设置过这个常量值，所以会出现没有定义的错误

这时候就可以使用DefinePlugin

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

image-20220130125744665

image-20220130125951298

这个时候，模板就会正确读取到BASE_URL的值

4.5.CopyWebpackPlugin

Vue打包中如果我们将一些文件放到public的目录下，文件会被复制到dist文件夹中

这个功能我们可以使用CopyWebpackPlugin

安装：npm install copy-webpack-plugin -D

配置CopyWebpackPlugin即可：

  • 复制的规则在patterns中设置
  • from：设置从哪一个源中开始复制
  • to：复制到的位置，可以省略，会默认复制到打包的目录下
  • globOptions：设置一些额外的选项，其中可以编写需要忽略的文件
    • .DS_Store：mac目录下回自动生成的一个文件
    • index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成
image-20220130130559513

5.Mode配置

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

  • 默认值是production（什么都不设置的情况下）
  • 可选值有：'none' | 'development' | 'production'

image-20220130130713296

image-20220130130926471

mode模式Webpack会默认帮你配置更多

image-20220130131034217

avatar
文章
阅读
粉丝