5、webpack管理资源--加载字体

※项目使用前文webpack起步建立的项目

※ file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

1）安装file-loader

npm install file-loader --save-dev // 前文已经安装可忽略

2）修改webpack.config.js，追加字体模块加载规则

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {  // 添加模块加载规则
        rules: [{  
            test: /\.(woff|woff2|eot|ttf|otf)$/, // 要加载的文件后缀，无引号
            use: [              // 使用的加载器
                'file-loader'
            ]
        }]
    }
}

 

3）添加src/YouRock-Extras.woff和src/YouRock-Regular.woff文件

 

4）修改src/style.css文件，引入并使用字体文件 

@font-face {
    font-family: 'MyFont';
    src: url('./YouRock-Extras.woff') format('woff'),
        url('./YouRock-Regular.woff') format('woff');
    font-weight: 100;
    font-style: unset;

}

.hello {
    color: red;
    font-family: 'MyFont';
    font-size: 50px;
}

5）编译查看结果 

npm run build