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

Question

我正在按照官方 webpack 网站上的指南进行操作。有关可重现的代码，请参阅官方网站中的 this section。

在提供的示例中，所有字体都输出到dist文件夹下。我想要的是在 fonts 子目录下输出字体。对于 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/'
        }
      }
    ]
  },

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

Output fonts, css files and other assets in a subdirectory of the dist folder

javascript

css

fonts

webpack