Css 使用空加载程序删除网页包中不需要的字体

我正在使用FontAwesome和其他字体包，包括eot、ttf、svg字体。我不想打包它们，所以我在网页包中有类似的内容：

            /*
             * 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");

---

这是无效的，我相信，我没有看到任何令人敬畏的图标。有没有办法用Webpack实现它？

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

url加载程序

{
  // 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]',
  },
},

最后我找到了解决办法。哪个描述得最好

要忽略某些字体并仍然具有适当的CSS，需要将返回空字符串的忽略加载程序与返回内容但不返回对象的原始加载程序结合起来

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

这看起来像是包含了你的字体真棒（但作为一个散列名称），排除了所有ttf和svg（改为放入一个空对象）是的，[hash].woff就是我想要的。但似乎url（[object object]）正在破坏一些东西，这就是为什么我没有看到任何图标。是的，但例如FontAwesome和其他字体包已经引用了eot、ttf、svg。当我简单地忽略这个事实时，我在Webpack中得到了一个错误，例如，它不知道如何处理svg。这就是为什么我想将svg重定向到空加载程序，我认为这会导致css问题。