Webpack 4:css-loader + file-loader,用于在构建过程中添加字体及其样式表

Question

鉴于此设置:

字体/ Styles.css中

@font-face {
  family: 'MyFont';
  src: url('fonts/myfont.otf');
}

我怎么能够:

1. 在我的JS包中,获取对CSS文件的URL的引用,例如字符串 [name].[hash].css
2. 生成的CSS文件应该是一个普通的CSS文件,但url()s指向生成的webfont文件？

就像是:

@font-face {
  family: 'MyFont';
  src: url('myfont.dds9394u329d9sa9r8439.otf');
}

我正在尝试:

webpack.config.js

{
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  loader: 'file-loader',
  include: [/fonts/]
},

{
  test: /\.css$/,
  use: ['file-loader', 'css-loader'],
  include: [/fonts/]
}

JS文件

const myfont = {
  family: 'MyFont',
  stylesheet: require('fonts/styles.css')
}

根据上一个问题,使用file-loader并require()很好地获取CSS的URL,但生成的文件不是纯CSS.

如何组合file-loader和css-loader(+可能是其他加载器)来获取此CSS文件？

谢谢!

PS我想避免copy-webpack-plugin这个,因为我希望CSS /字体文件在代码中进行哈希处理和寻址.

Answer 1

为了后代：这是Webpack配置，通过它我可以获得所需的结果。

module: {
  rules: {
    // Font stylesheets
    {
      test: /\.css$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'css/[hash].[ext]'
          }
        },
        'extract-loader',
        'css-loader',
        'postcss-loader'
      ],
      include: [/fonts/]
    },

    // Font files
    {
      test: /\.(woff|woff2|ttf|otf)$/,
      loader: 'file-loader',
      include: [/fonts/],

      options: {
        name: '[hash].[ext]',
        outputPath: 'css/',
        publicPath: url => '../css/' + url
      }
    },
  }
}