Webpack打包字体font-awesome的方法示例

站长资源 2024/11/8 佚名

15 1538 15

相思资源网 Design By www.200059.com

使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件：

1. 首先安装依赖:

复制代码代码如下:npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. 在入口文件中引入font-awesome

require('font-awesome-webpack');

3. 设置webpack.config.js处理字体文件

这里有两种方式，如果你不想单独生成字体文件，而是想把字体文件和css文件构建到一个文件中，可以使用url-loader，设置如下：

  module: {
      rules: [
        // 省略其他配置...

        // font-awesome
        {
          test: /\.(eot|svg|ttf|woff|woff2)\w*/,
          loader: 'url-loader"htmlcode">

  module: {
  rules: [
    // 省略其他配置...

    // font-awesome
    {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader"_blank" href="https://github.com/webpack-contrib/file-loader" rel="external nofollow" >https://github.com/webpack-contrib/file-loader


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

webpack,字体打包,webpack,font,awesome,font,awesome,打包

标签：