Question

我正在使用FontAwesome和其他包含eot，ttf，svg字体的字体包。我不想打包它们所以我在Webpack中有类似的东西：

            /*
             * Load fonts from URL
             */
            {
                test: /\.(png|woff|woff2)(\?.*$|$)/,
                loader: 'file-loader'
            },

            /*
             * Remove outdated fonts
             */
            {
                test: /\.(eot|ttf|svg)(\?.*$|$)/,
                loader: 'null-loader'
            },

然后在main.css中我得到了这样的东西：

url(fee66e712a8a08eef5805a46892932ad.woff) format("woff"),
url([object Object]) format("truetype"),
url([object Object]#fontawesomeregular) format("svg");

哪个无效我相信，我没有看到任何FontAwesome图标。有没有办法用Webpack实现它？

Answer 1

如果您只想支持woff，可以使用url-loader

{
  // Match woff2 in addition to patterns like .woff?v=1.1.1.
  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader',
  options: {
    // Limit at 50k. Above that it emits separate files
    limit: 50000,

    // url-loader sets mimetype if it's passed.
    // Without this it derives it from the file extension
    mimetype: 'application/font-woff',

    // Output below fonts directory
    name: './fonts/[name].[ext]',
  },
},

Answer 2

最后我找到了解决方案。最好的描述是here

要忽略某些字体并且仍然有适当的CSS，需要组合ignore-loader，它返回返回内容但不返回对象的空字符串+ raw-loader。

        {
            // Ignore fonts
            test: /\.(eot|ttf|svg)(\?.*$|$)/,
            use: ['raw-loader', 'ignore-loader']
        },

使用null-loader删除Webpack中不需要的字体

2 个答案: