Vue3学习之旅--之webpack基础-进阶--webpack5?拿来吧你！

vue3一路的笔记
vue3学习之旅–邂逅vue3-了解认识Vue3
vue3学习之旅–邂逅vue3-了解认识Vue3(二)
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段
Vue3学习之旅–爱上Vue3–Vue3的Options-API
vue3学习之旅–vue的表单和开发模式–组件化开发初识
Vue3学习之旅–初识webpack–webpack打包js，css，less等文件以及兼容性处理

Webpack打包其他资源

加载图片案例准备

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

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

.image-bg {
   
   
  background-image: url("../image/3.jpg");
  width: 300px;
  height: 300px;
}

// 导入背景图片的样式
import '../css/index.css'
import myImg from '../image/1.JPG'
// 设置背景图片
const bgDiv = document.createElement('div');
bgDiv.className = 'image-bg';

// 设置img标签的src属性
const img = document.createElement('img');
img.src = myImg;

document.body.appendChild(bgDiv);
document.body.appendChild(img);

这个时候，打包会报错

报错了，并且提示我们可以需要一个loader来解决图片的问题。

file-loader

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

1. file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文 件夹中；
2. 当然我们待会儿可以学习如何修改它的名字和所在文件夹；

安装file-loader：

npm i file-loader -D

配置处理图片的Rule：

// 配置打包图片资源的规则
{
   
   
    test: /\.(jpg|png|jpeg|JPG)$/,
    use: 'file-loader'
}

我们会发现图片也被打包了。

文件的命名规则

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

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

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

1. https://webpack.js.org/loaders/file-loader/#placeholders
2. 我们可以在文档中查阅自己需要的placeholder；

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

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

设置文件的名称

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

{
   
   
        test: /\.(jpg|png|jpeg|JPG)$/,
        use: {
   
   
          loader: 'file-loader',
          // file-loader的参数配置
          options: {
   
   
            // 打包后图片文件所在的路径
            // outputPath: 'image',
            // 打包后生成文件的名称
            // [name] 源文件的名称（不含拓展名）
            // 我们发现不写配置时，文件的名称过长（且文件名是通过hash算法算出来的，为了防止重名）
            // [hash:6] 默认生成文件名称的hash算法，32位，取前六位
            // [ext] 使用原来文件的拓展名
            // name: '[name]_[hash:6].[ext]'

            // 当然：我们也可以把图片存放的路径和图片名称合在一起
            name: 'image/[name]-[hash:6].[ext]'
          }
        }
      }

设置文件的存放路径

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

1. 其实按照这种设置方式就可以了；
2. 当然我们也可以通过outputPath来设置输出的文件夹；

url-loader

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

安装url-loader：

npm i url-loader -D

{
   
   
        test: /\.(jpe?g|JPG|png)$/,
        use: {
   
   
          loader: 'url-loader',
          options: {
   
   
            name: 'image/[name]-[hash:6].[ext]',
            // 设置图片大小的限制，只有小于多少kb的图片我们才会转为base64格式
            // 如果大于这个限制 我们就不会转为base64格式。而是继续采用上面的path和name的形式打包，还是保持图片的形式不变
            limit: 100 * 1024 // 小于100kb的文件才会转为base64格式
          }
        }
      }

显示结果是一样的，并且图片可以正常显示；

但是在dist文件夹中，我们会看不到 大于100kb 图片文件：

1. 这是因为我的两张图片的大小分别是38kb和129kb；
2. 默认情况下url-loader会将所有的图片文件转成base64编码。但是配置了limit以后就可以限制小于多少kb的图片才会转为base64格式。

可以看见bundle.js文件里面的确有base64格式的字符串

url-loader的limit

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

1. 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
2. 而大的图片也进行转换，反而会影响页面的请求速度；

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

1. url-loader有一个options属性limit，可以用于设置转换的限制；
2. 下面的代码38kb的图片会进行base64编码，而129kb的不会；

asset module type

认识asset module type

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

1. 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
2. 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

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

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

asset module type的使用

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

发现依然打包成功！

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

方式一：修改output，添加assetModuleFilename属性； （了解即可）

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

{
   
   
        test: /\.(JPG|jpe?g|png)$/,
        // 这里不在使用use属性 而是type属性
        // 使用asset/resource 来代替 file-loader
        // type:'asset/resource'

        // 比较常用的我们一般直接写成 asset
        type: 'asset',
        // 下面的配置也可以放在 output里面（了解）
        // generator属性 生成 也就是打包后的图片存放时相关的配置
        generator: {
   
   
          // 配置图片名称和图片位置 
          // 这里的 [ext] 拿到的文件拓展名包含 .
          filename: 'image/[name]-[hash:6][ext]'
        }
      }

url-loader的limit效果

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

1. 将type必须使用asset属性值；
2. 添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

{
   
   
        test: /\.(JPG|jpe?g|png)$/,
        // 比较常用的我们一般直接写成 asset
        type: 'asset',
        // 配置相关的asset参数 使用parser属性
        parser