在 dist 文件夹的子目录中输出字体、css 文件和其他资源

Question

我正在关注官方 webpack 网站上的指南。可复现的代码见官网this section。

在提供的示例中，所有字体都在 dist 文件夹下输出。我想要的是在字体子目录下输出字体。类似地，对于其他类型的资产，例如 css、图像等。我希望它们根据其扩展名输出到文件夹下。

输出如下所示：

-/dist
--index.html
--bundle.js
--/css
---style1.css
--/fonts
---font1.woff
---font2.ttf

Answer 1

您可以使用file-loader 来实现：

  {
    test: /\.(png|svg|jpe?g|gif)$/,
    include: /images/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          publicPath: 'images/'
        }
      }
    ]
  },
  {
    test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    include: /fonts/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/',
          publicPath: 'fonts/'
        }
      }
    ]
  },