使用带有自定义输出文件名的 webpack 资产模块

Question

假设我有以下 webpack.config.js 文件：

module.exports = {
    //...
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"),
        assetModuleFilename: "assets/[name][ext]",
    },
    module: {
        rules: [
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
    //...
    ],
};

我的问题是如何将字体与图像分开？我想把每一个放在 assets 文件夹下名为“fonts”和“images”的子目录中。我知道使用“文件加载器”可以做到这一点。但是，我想使用资产模块。

Answer 1

您可以使用Rule.generator.filename 属性：

module.exports = {
  // ...

  module : {
    rules : [
      // ...

      // Fonts
      {
        test      : /\.(woff2?|ttf|eot)(\?v=\w+)?$/,
        type      : 'asset/resource',
        generator : {
          filename : 'fonts/[name][ext][query]',
        }
      },
    ]
  },

  // ...
}

Answer 2

这应该没问题。

      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[hash:8].[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|tiff)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[hash:8].[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }