webpack解析字体，file-loader

本文主要是介绍webpack解析字体，file-loader，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意：安装之前，先保证webpack项目能正常运行！
因为字体和图片都不是代码文件，所以，都可以使用file-loader

1.安装 file-loader 依赖

cnpm i file-loader -D

2.在src目录下创建font文件夹，并引入字体 （这里引入AdobeGothicStd-Bold.otf.otf ）

3.配置，在 webpack.config.js 下新增配置：

module.exports = {// ...module:{rules:[// ...{test:/\.(woff|woff2|eot|otf)$/,use:'file-loader'}]}
}

4.使用，在 search.less 下使用

@font-face{font-family: 'AdobeGothicStd-Bold';src:url('./font/AdobeGothicStd-Bold.otf') format('truetype');
}
.search-txt{font-size:36px;font-family:'AdobeGothicStd-Bold';
}

这篇关于webpack解析字体，file-loader的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---