后面文章中 体验了webpack的打包 、解析css资源 ，接下来看看我的项目中罕用到的图片、字体、文件该怎么解决吧~
我的项目门路如下，在上一篇 解析css资源 我的项目根底上减少了一些文件
demo├─ src│ ├─ css│ │ ├─ index.css│ │ └─ file.css （+）│ ├─ img│ │ ├─ portrait.png （+）│ │ └─ sky.jpg （+）│ ├─ js│ │ ├─ component.js│ │ └─ createElement.js （+）│ └─ index.js├─ index.html├─ package.json└─ webpack.config.js在 createElement.js 别离创立一个 div 元素设置背景图片、img 抉择引入图片链接。
// createElement.jsconst imageEl = new Image();const portrait = require("../img/portrait.png");imageEl.src = portrait;document.body.appendChild(imageEl);const divEl = document.createElement("div");divEl.style.width = "200px";divEl.style.height = "200px";divEl.className = "div-el";document.body.appendChild(divEl);// file.css.div-el { background: url("../img/sky.jpg") top center/100% no-repeat; display: inline-block;}// index.css@import './file.css';no loaders
间接通过 npm run build 是无奈通过编译的，会提醒没有适合的 loader 解决图片资源
file-loader
file-loader 就是一个能够用来解决图片字体等文件资源的 loader，它的解决形式是将资源复制到打包后的文件夹，并重命名。
通过 npm i file-loader -D 装置依赖，在 webpack.config.js 中配置
因为 file-loader 在webpack5 环境下曾经弃用，要想正确处理图片，须要配置两个属性。
- esModule: false （启用 CommonJS 模块语法）
- type: "javascript/auto" （进行以后 asset 模块的解决，并再次启动解决时，避免导致 asset 反复）
module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: "file-loader", options: { // 定义复制后的文件名，取原文件名+哈希值6位+原文件后缀 name: "img/[name]_[hash:6].[ext]", esModule: false, }, }, ], type: "javascript/auto", }, ], },};复制后的资源在 dist/img 文件夹下
在 html 页面引入打包后的 js 文件，通过 live server 能够看到图片显示在页面上
url-loader
url-loader 是另一个能够解决图片字体等文件资源的 loader，它与 file-loader 有些不同
- file-loader 会复制所有的资源
- url-loader 只会复制占用空间较大的资源，当资源较小时，会对它进行 base64 编码
通过 npm i url-loader -D 装置依赖，在 webpack.config.js 中配置
url-loader 和 file-loader 一样，在webpack5环境下曾经弃用，也须要配置 esModule: false、type: "javascript/auto" 属性
module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: "url-loader", options: { name: "[name]_[hash:6].[ext]", // 自定义转成 base64 资源大小，超过 limit 将间接复制资源 limit: 100 * 1024, esModule: false, }, }, ], type: "javascript/auto", }, ], },};sky.jpg 大小为576kb，portrait.png 为33.2kb，所以 portrait.png 是以 base64 编码的模式展示，sky.jpg 被复制到了打包后的文件夹 img 中
asset module type
在webpack5环境下弃用的 url-loader、file-loader，应用 asset module type 来代替，无需装置依赖，间接在 webpack.config.js 中配置
asset module type 有以下几种类型来对应 url-loader、file-loader
- asset/resource 实现同 file-loader，复制资源
- asset/inline 实现同 url-loader，自定义复制资源还是解决成 base64编码
- asset 实现同url-loader，依据文件大小主动解决
asset module type 的配置会略微简略一些
module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", // 对复制后的资源重命名 generator: { filename: "img/assetmodule.[name][ext]", }, }, ], },};type为asset 时，大小为576kb的 sky.jpg 和 33.2kb 的 portrait.png 都被间接复制了
字体资源
以上形式也都能够解决字体资源，从 iconfont 上选取图标保留到本人我的项目并下载到本地
将iconfont.css及ttf、woff文件放到src目录下新增font文件夹中，在 createElement.js 中创立标签、index.css 中引入 iconfont 款式资源
// createElement.jsconst addIcon = document.createElement("i");addIcon.className = "iconfont icon-add";document.body.appendChild(addIcon);const deleteIcon = document.createElement("i");deleteIcon.className = "iconfont";deleteIcon.innerHTML = "";document.body.appendChild(deleteIcon);// index.css@import '../font/iconfont.css'应用 asset module type 来对字体资源进行配置
module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(ttf|woff2?)$/i, type: "asset/resource", generator: { filename: "font/[name]_[hash:6][ext]", }, }, ], },};两个小图标就能在页面上展现了
音视频等其它资源也都能够应用 file-loader、url-loader、asset module type 解决，亲测无效~
以上就是解决图片字体等文件资源的形式，更多无关webpack的内容能够参考我其它的博文，继续更新中~