当前位置:首页 >> 网络编程

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

使用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

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