2023年7月9日发(作者：)

webpack5学习与实战-（三）-引⼊其他资源模块⼀，什么是资源模块webpack除了引⼊js之外，还可以使⽤内置的资源模块（叫做assets modules），来引⼊任何的其他类型的资源。webpack5 之前我们处理静态资源⽐如。图⽚字体之类的资源的时候等，需要⽤到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停⽌了更新。webpack5使⽤四种新增的资源模块（Asset Modules）替代了这些loader的功能。asset/resource 将资源分割为单独的⽂件，并导出url，就是之前的 file-loader的功能.asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.asset ⾃动选择导出为单独⽂件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。⼆，asset/resource将资源分割为单独的⽂件，并导出url1，基本的配置 module:{ rules:[ { test:/.png$/,//正则匹配到png⽂件时，执⾏本策略 type:'asset/resource'//将其分割为单独的⽂件，并导出url(w⽂件路径) } ] }然后再在代码中写：import hello from './hello'import imgSrc from './assets/'//把这个图⽚资源当作模块来引⼊，因为设置的是resource,所以返回的是这个⽂件的urlhello()const img=Element('img')=imgSrc//只要这个变量的值是url，就可以了Child(img)于是在浏览器中就可以看到图⽚了：2，⾃定义asset module资源打包后的路径和名字在output中配置：assetModuleFilename:'images/[name]_[contenthash][ext]',//⾃定义asset module资源打包后的路径和名字其中[name]：是该⽂件本⾝的名字[contenthash]：是使⽤hash来命名⽂件[ext]：是该⽂件⾃⼰的扩展名.png等这样配置之后打包出来，就会是这样的：3，某种资源模块独有的路径和名字上⽂中的配置，是在output中进⾏的资源⽂件的公共配置。除此之外，还可以在rule的对应资源中进⾏单独配置，并且这⾥的配置优先级更⾼，会覆盖上⽂的配置。module:{ rules:[ { test:/.png$/,//正则匹配到png⽂件时，执⾏本策略 type:'asset/resource',//将其分割为单独的⽂件，并导出url(w⽂件路径) generator:{ filename:'images/[contenthash][ext]'//这⾥的配置优先级⾼于output中的assetModuleFilename } } ] }三，asset/inline将资源导出为dataURL（url(data:)）的形式1,基本的配置{ test:/.svg$/, type:'asset/inline',}然后使⽤svg:import imgSvg from './assets/'const svg= Element('img')=t='height:1000px;width:1000px'Child(svg)打包之后，会发现在dist⽂件夹下并没有⽣成这个svg⽂件。⽽打开浏览器，浏览器上呈现的是这样的，这不是⼀个⽂件的路径，⽽是⼀个base64的数据：四，asset/source将资源导出为源码（source code）1，基本配置{ test:/.txt$/, type:'asset/source', }

import text from './assets/'const textDiv=Element('div')ntent=Child(textDiv)可以看到，它也没有在dist⽂件夹下⽣成⽂件，⽽是直接把源码放置到对应的位置。（可以理解为编译时，把这个资源⽂件的内容放置到对应的代码中了。）五，asset:⾃动选择单独⽂件url或者dataUrl形式（8KB作为分界线）asset ⾃动选择导出为单独⽂件或者 dataURL形式（默认为8KB）1，基本配置{ test:/.jpg$/, type:'asset',}

然后在代码中写：import jpgSrc from './assets/'//把这个图⽚资源当作模块来引⼊，因为设置的是resource,所以返回的是这个⽂件的urlconst jpg=Element('img')=jpgSrc//只要这个变量的值是url，就可以了Child(jpg)因为这张图⽚是30.56KB>8KB，所以采⽤的策略是导出为单⽂件的url,所以dist⽬录下会⽣成⼀个新的图⽚资源。当我换⼀张⼩于8KB的图⽚的时候。就会转化成base64的形式了:2,配置资源⼤⼩按照上⽂所说：如果⼀个模块源码⼤⼩⼩于 maxSize，那么模块会被作为⼀个 Base64 编码的字符串注⼊到包中， 否则模块⽂件会被⽣成到输出的⽬标⽬录中。于是配置：{ test:/.jpg$/, type:'asset', generator:{ filename:'images/[name]_[contenthash][ext]' }, parser: { dataUrlCondition: { maxSize: 4 * 1024*1024, }, }, }

六，本节中的webpack完整配置const path = require("path");//这个是node内置的⼀个模块，⽤来操作⽂件路径的⽅法const HtmlWebpackPlugin = require("html-webpack-plugin");s = { entry: "./src/",//设置打包⼊⼝ output: { path: e(__dirname, "dist"),//设置打包的出⼝,需要是绝对路径，⽽__dirname是node的⼀个全局变量，记录当前⽂件的绝对路径 filename: "",//设置打包出来的js的⽂件名 clean:true,//清除上次打包出来的⽂件 assetModuleFilename:'images/[contenthash][ext]',//⾃定义asset module资源打包后的路径和名字 }, devServer: { static: "./dist" //执⾏dist作为根⽬录,这是本地服务器，打包的内容放置在内存中，然后静态资源指定为这个路径 }, devtool: "inline-source-map",//映射定位error和warning mode: "development",//设置打包的模式：开发/测试/⽣产，这个和_ENV息息相关，我们在中⽤命令⾏设置：webpack --mode=production plugins: [ new HtmlWebpackPlugin({ template: "./", //⽤来做模板的html的⽂件路径 filename: "", //⽣成的html的名字 inject: "body" //打包出来的那个js⽂件，放置在⽣成的body标签内 }) ], module:{ rules:[ { test:/.png$/,//正则匹配到png⽂件时，执⾏本策略 type:'asset/resource',//将其分割为单独的⽂件，并导出url(w⽂件路径) generator:{ filename:'images/[name]_[contenthash][ext]' } }, { test:/.svg$/, type:'asset/inline', }, { test:/.txt$/, type:'asset/source', }, { test:/.jpg$/, type:'asset', generator:{ filename:'images/[name]_[contenthash][ext]' }, parser: { dataUrlCondition: { maxSize: 4 * 1024*1024, }, }, }

] }};