webpack——asset-modules，处理资源文件如.img .txt等-CFANZ编程社区

今天介绍的内容是webpack处理资源的方式。

首先给出代码目录结构，方便大家对照：

1首先介绍的是asset/resource方式，生成单独的文件并导出url他会将文件导出并生成url,首先在asset文件夹下新建一个1.png图片，然后在index.js中引入，并动态加载到页面上。代码演示如下：

index.js:

import imgsrc from "./assets/1.png"

// asset/resource
const img = document.createElement("img")
img.src = imgsrc
document.body.appendChild(img)

webpack.config.js中做以下配置，用:asset/resource方式：

module:{
        rules:[
            {
                test:/\.png$/,
                type:"asset/resource",//生成单独的文件并导出url
                generator:{
                    filename:"images/[contenthash][ext]",
                },
            },
    }

然后启动webpack，在页面上观察，可以看见图片是URL形式。

2.asset/inline方式——导出dataUrl,如将资源转换成base64位代码：

首先在asset文件夹下新建一个3.svg，然后在index.js中引入，并动态加载到页面上。

import logsvg from "./assets/3.svg"

// asset/inline
const img1 = document.createElement("img")
img1.style.cssText = "width:50px;height:50px"
img1.src = logsvg
document.body.appendChild(img1)

webpack.config.js中做以下配置，用:asset/inline方式：

module:{
        rules:[
            {
                 {
                    test:/\.svg$/,
                    type:"asset/inline",//导出dataUrl,如将资源转换成base64位代码
                },
            },
        }

然后启动webpack，在页面上观察，可以看见图片是dataUrl,如将资源转换成base64位代码

3.asset/source——导出资源的源代码

首先在asset文件夹下新建一个hell.txt，然后在index.js中引入，并文件内容加载到页面上。

import logsvg from "./assets/hell.txt"

// asset/source
const block =  document.createElement("div")
block.style.cssText = "color:red"
block.textContent = txtx;
document.body.appendChild(block)

webpack.config.js中做以下配置，用:asset/source方式：

module:{
        rules:[
            {
                 test:/\.txt$/,
                 type:"asset/source",//导出资源的源代码
            },
        }

然后启动webpack，在页面上观察，可以看见hell.txt的文件内容展示在页面上了（不得不说丫丫真漂亮！）

4.最后就是 asset方式——他会在在asset/resource和asset/inline选择一种，要根据你设置的限制的资源大小来确定使用哪一种：

首先在asset文件夹下新建一个assa.jpg，然后在index.js中引入，并文件内容加载到页面上。

import assa from "./assets/assa.jpg"

//asset
const img2 = document.createElement("img")
img2.style.cssText = "width:50px;height:50px;border-radius: 50%"
img2.src = assa;
document.body.appendChild(img2)

webpack.config.js中做以下配置，用:asset方式：

module:{
        rules:[
            {
                test:/\.jpg$/,
                type:"asset",//在asset/resource和asset/inline选择一种
                parser:{
                    //用来配置最大的资源的值， 小于这个值会用asset/inline否则用asset/resource
                    //默认是8*1024   也就是8k

                    dataUrlCondition:{
                        maxSize:8*1024
                    },
                },
                //原理：会根据加载资源的大小来生成
            },
        }

然后启动webpack，在页面上观察,首先我们看一下这个jpg的大小，8.1k,配偶之中设置的是8k,我们运行一下看看效果

可以看到是URL的方式：

我们修改一下webpackde配置将8*1024 改成9*1024，在运行一下看看会发生什么

module:{
        rules:[
            {
                test:/\.jpg$/,
                type:"asset",//在asset/resource和asset/inline选择一种
                parser:{
                    //用来配置最大的资源的值， 小于这个值会用asset/inline否则用asset/resource
                    //默认是8*1024   也就是8k

                    dataUrlCondition:{
                        maxSize:9*1024
                    },
                },
                //原理：会根据加载资源的大小来生成
            },
        }

结果如图：

可以看到图片变成了base64的方式了，所以 asset方式如果资源的大小比配置的小会选择asset/inline，也就是base64方式，如果资源的大小比配置的大会选择asset/resource，也就是URLd的方式。

今天就到这里了，大家加油！！！！！！！！！