Webpack 4-文件加载器-不使用@font-face渲染字体(但构建和一切工作正常)

Webpack是一个现代的静态模块打包工具，它主要用于将各种资源文件（如JavaScript、CSS、图片等）打包成一个或多个静态资源文件，以便在浏览器中加载。Webpack提供了丰富的功能和插件，可以帮助开发者优化代码、提高性能，并且支持模块化开发。

文件加载器是Webpack中的一个重要概念，它用于处理各种类型的文件，将它们转换为模块可以直接引用的形式。在Webpack 4中，文件加载器被替代为了更加灵活和强大的"模块规则"（module rules）。

对于不使用@font-face渲染字体的情况，可以使用Webpack的file-loader或url-loader来处理字体文件。这两个加载器可以将字体文件转换为模块可以引用的形式，并且可以根据配置将字体文件进行压缩、重命名等操作。

file-loader是一个简单的文件加载器，它会将字体文件复制到输出目录，并返回文件的URL。可以通过以下方式配置file-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};

url-loader是在file-loader的基础上进行了扩展，它可以将小于指定大小的文件转换为DataURL，减少了HTTP请求的数量。可以通过以下方式配置url-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8KB的文件将转换为DataURL
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};

推荐的腾讯云相关产品和产品介绍链接地址：