Webpack打包font-awesome

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

1. 首先安装依赖:

    npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

• 1
• 2

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

    require('font-awesome-webpack');

• 1
• 2

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

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

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

                // font-awesome
                {
                    test: /\.(eot|svg|ttf|woff|woff2)\w*/,
                    loader: 'url-loader?limit=1000000'
                },

                // 省略其他配置...
            ]
    }   

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

这里给url-loader传递了一个参数limit，并且设置得比较大，这个数字可以自定义，但是一定要保证大于最大字体文件的大小，因为这个参数是告诉url-loader，如果文件小于这个参数，那么就以Data Url的方式直接构建到文件中。使用这种方式最方便，但是缺点就是构建出来的文件特别大，并且在线上的时候没办法使用cdn缓存文件，不建议部署到线上。 
第二种方法就是制定url-loader或者file-loader在构建的时候文件的输出目录，这样在部署的时候font-awesome就会依赖在构建时指定目录下的字体文件，而不会出现找不到字体文件的问题了，此时，webpack的构建配置如下：

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

        // font-awesome
        {
            test: /\.(eot|svg|ttf|woff|woff2)\w*/,
            loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
        },

        // 省略其他配置...
    ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

经过上面的配置构建的工程，font-awesome就会到“/static/res/font/”目录下寻找指定的字体文件，而同时在你构建的工程中也会生成对应的font文件夹，你只需要将这个font文件夹中的字体文件拷贝到“/static/res/font”目录下（如果publicPath为“./”，表示你直接依赖构建目录下的font文件，则不用拷贝），这样当你访问你的页面时就能够正确请求到字体文件了。

参考

• https://github.com/webpack-contrib/file-loader
• https://blog.csdn.net/yxz329130952/article/details/71794043