webpack解析字体，file-loader

kaiking_g

于 2019-06-18 23:48:25 发布

阅读量2.5k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/u013299635/article/details/92801881

版权

webpack 专栏收录该内容

15 篇文章

订阅专栏

该博客介绍了在Webpack项目中使用file-loader引入字体的方法。前提是Webpack项目能正常运行，具体步骤为：安装file-loader依赖，在src目录下创建font文件夹并引入字体，在webpack.config.js下新增配置，最后在search.less下使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：安装之前，先保证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';
}