webpack小计(二) — webpack文件资源打包&常用插件-一一网

文件资源打包

webpack依赖树

当我们使用webpack对资源进行打包时，默认只会将入口文件进行打包

webpack中存在着一个重要的概念：依赖树

依赖树是指以入口文件为根节点 通过import模块导入资源文件的方式去延展的一种树结构

这样子webpack进行模块打包时会从入口文件开始将所有存在于依赖树中的文件资源进行模块打包（在webpack中一个文件或者一张图片称为一个模块）

图片资源打包

在网页中使用图片的两种方式

方式1 js创建一个div元素给该盒子添加background-image：url（）

方式2 js创建一个img元素添加src图片地址属性

不过以下方法添加图片的方法是错误的

这样子webpack在打包时会在build打包文件中寻找图片地址

但是我们并没有将图片资源解析打包到文件包中

导致无法找到该图片直接将图片地址作为一个字符串渲染到页面上

必须了解的时当我们使用webpack加载文件时必须先将文件资源一起打包到资源文件夹下

依赖树中是没有对图片资源进行依赖的所以图片并没有被打包进资源文件包中

`这里需要将图片文件加入依赖树中`
复制代码

file-loader

仅仅将图片资源加入到依赖树是远远不够的，因为webpack并不知道怎么解析图片资源

这个时候我们就需要依赖一个对文件资源进行解析的loader —file-loader 帮助我们处理import/require()导入的文件资源

安装

npm install file-loader -D

配置&使用

   rules规则简单配置
    {
        //文件类型
        test: /\.(png|jpe?g|gif|svg)$/i,
    
        use: {
          loader:'file-loader'
        }
      }
复制代码

再次进行打包发现没有报错并且将图片文件打包到了出口文件

我们发现直接打包的图片名是一串很长的十六进制哈希值

哈希值是为了防止文件资源名重复导致不必要的麻烦

但是文件名只以哈希值表示很难对图片进行分辨

我们可以使用PlaceHolders对文件名进行设置

webpack.js.org/plugins/ban…

{
    test:/\.(png|jpe?g|gif|svg)$/i,
    use:{
        loader:'file-loader',
        options:{
        // img/ 创建一个目录文件夹  [name]显示原文件名
        //[hash:8]设置8位哈希位  [ext扩展名]
          name:"img/[name].[hash:8].[ext]"   
         }
    }
}
复制代码

文件名已经可以分辨了并添加了一个img的图片目录

设置目录文件路径除了 /img (vue/react常用)
还可以通过 outputPath 设置

url-loader

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

安装

npm install url-loader -D

配置使用

{
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: {
          loader: "url-loader",
          options: {
            name: "[name]-[hash:8].[ext]",
            outputPath: "img"
          }
        }
      }
复制代码

使用的方法是一样的但是默认情况下 url-loader会将所有的图片文件转换为base64格式

这是输出文件中不存在打包的图片资源

打开打包文件bundle.js 所有的图片都被转换成了base64的格式

limit属性

实际开发中我们往往是将较小的图片转换成base64格式传输这样有利于减少加载每个小图片都需要发送的请求造成的资源浪费

我们可以使用url-loader中options提供的limit属性对转换文件的大小进行限制

 
{
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: {
          loader: "url-loader",
          options: {
            // 限制 50k 以下的资源转换成base64格式
            limit:50 * 1024,
            name: "[name]-[hash:8].[ext]",
            outputPath: "img"
          }
        }
      }
 
这时有一张大于 50kb 的图片被打包
复制代码

而另外一张图片则转换成base64的方式

资源模块类型 asset module type

webpack5之后我们使用资源模块类型（asset module type）来代替file-loader，url-loader等文件资源加载的loader

assert/resource:代替 file-loader 整文件导出

asset/inline:代替 url-loader 导出全部默认为base64格式

asset/source:代替 raw-loader

asset:通过限制文件大小确定导出方式(url-loader+limit属性) 默认使用file-loader加载方式

使用

因为asset为webpack5自带的文件加载方式 所以不需要安装loader

在rule中设置type属性为asset/resource 他的效果跟file-loader是一样的

{
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource' 
        // type: 'asset/inline'  -> 默认url-loader加载方式（base64）
        //asset 可设置文件大小限制 
     }
复制代码

更改文件名

方式一：更改output属性

output:{
    filename:'js/bundle.js',
    //使用资源模块类型  默认扩展名[ext]是带.的 
    assetModuleFilename:'img/[name]-[hash:8][ext]'
}
复制代码

方式二：直接rule中设置generator属性

{
 test: /\.(png|jpe?g|gif|svg)$/i,
 type:'asset',
 generator:{
     filename:"img/[name].[hash:8][ext]"
 }
}
复制代码

asset -> url-loader的limit效果

首先需要设置type为asset类型

{
 test: /\.(png|jpe?g|gif|svg)$/i,
 type:'asset',
 generator:{
     filename:"img/[name].[hash:8][ext]"
 },
  //设置图片限制为 50kb  大于50kb作为文件打包  小于50kb转换位base6格式
 parser:{
     dataUrlCondition:{
         maxSize:50 * 1024
     }
 }
复制代码

达到的效果和设置了limit属性的url-loader是一样的

字体文件加载

可以使用file-loader或者资源文件类型asset/resouce

插件 plugin

认识webpack插件

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

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

CleanWebpackPlugin

当我们每次修改一些配置信息的时候，进行重新打包之前，都需要手动删除打包的输入文件夹，不然就会文件夹重复 CleanWebpackPlugin插件帮助我们清理文件夹

安装

npm install clean-webpack-plugin -D

配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

moudule.exports = {
    plugins:{
        new CleanWebpackPlugin()
    }
}
复制代码

HtmlWebpackPlugin

在最终的打包文件中自动添加对应的入口文件 index.html

安装

npm install html-webpack-plugin -D

配置

//这里不需要进行解构 因为HtmlWebpackPlugin插件是一个独立的功能块
const HtmlWebpackPlugin = require('html-webpack-plugin')

  plugins: [ 
    new HtmlWebpackPlugin({
      title:'webpack案例'
    })
  ]
复制代码

配置好之后直接使用再次打包发现出口文件中多了一个 index.html 文件

它使用的是html-webpack-plugin中默认的default_index.ejs模板