Webpack5 加载 image 图像和处理 Font 字体

其实在之前我们已经介绍了 Webpack 的内置 Asset Modules 资源模块，可以轻松的加载一些 .jpg、.png、.svg 这样的图片资源。如何的在 CSS 样式中加载 background 和 icon 这样的图像？

在 CSS 样式文件中通过 background-image 属性设置一个元素的背景图像。

//style.css
//...
.block-bg {
    background-image: url(./assets/bg.png)  !important;
}

// index.js 
//...
import exampleText from './assets/exampleText.txt'

import './style.css'

//...


const block=document.createElement('div')
block.style.cssText='width:200px;height:200px'
block.classList.add('block-bg')
block.textContent=exampleText
document.body.appendChild(block)

编译打包，启动服务，在浏览器访问： http://localhost:8080/index_app.html。可以看到如下结果。

 

如何的去加载字体 Fonts 字体资源呢？

在 CSS3 中新增了一个 Web Fonts 功能，允许指定的字体文件被下载到本地。这是一种非常有效的方式，这样字体就不受限于本地是否安装了字体，而且大部分浏览器都支持 Web 字体。

我们前面学习的 Asset Module 资源模块可以来解决这个问题。我们知道资源模块其实可以用于加载任何的文件类型，包括字体。

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//...
module.exports = {
    //...
    plugins: [
        //...
        new MiniCssExtractPlugin({
          filename:'style/[contenthash].css',
        }),
    ],


  //...


    module: {
        rules: [
             //...
              {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
            },
        ]
    }
}

要使用字体，需要在我们项目中添加一些字体。

配置好 loader 并将字体文件放在合适的位置后，你可以在 .css 样式文件通过一个 @font-face 声明将其混合。本地的 url(...) 指令会被 webpack 获取处理，就像它处理图片一样。

@font-face {
    font-family: 'Myfont';
    src: url('./assets/my-fonts.ttf') format('truetype');
}
.block-bg {
    font-family: 'Myfont';
    background-image: url(./assets/bg.png)  !important;
}

编译打包，启动服务，在浏览器访问：http://localhost:8080/index_app.html。

暂时介绍到这里，加油！！！