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