美文网首页webpack
5.1 file-loader 解析字体

5.1 file-loader 解析字体

作者: 你好岁月神偷 | 来源:发表于2021-08-06 09:06 被阅读0次

    1、安装下载loader:

        npm i file-loader -D

    2、在 webpack.config.js 中配置loader

    module.export = {

        mode: 'development',

        entry: './src/index.js',

        output: {

            filename: 'main.js',

            path: path.reslove(__dirname, 'dist')

        },

        module: {
            rules: [{

                test: /\.(woff|woff2|eot|ttf|otf)$/,

                use: 'file-loader',

            }]

        }

    }

    3、将字体文件放入创建的 font 文件夹中

    4、把引入进来的字体在一个 css 文件中进行定义

    5、通过 import 的方式引入到要使用的文件中

        例子:import "xx/xxx/font.css"

    6、直接在style标签内只用字体样式

         例子: font-family: "时尚中黑简体";

    就这样子,欢迎指正~

    相关文章

      网友评论

        本文标题:5.1 file-loader 解析字体

        本文链接:https://www.haomeiwen.com/subject/ijlbvltx.html