Webpack 4：css-loader文件加载器,用于在构建过程中添加字体及其样式表

鉴于此设置： 字体/ Styles.css中 @font-face { family: 'MyFont'; src: url('fonts/myfont.otf');} 我怎么能够：

... . . 鉴于此设置：

字体/ Styles.css中

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

我怎么能够：

>在我的JS包中,获取对CSS文件的URL的引用,作为字符串,例如,[名称].[散列]的CSS
>生成的CSS文件应该是一个普通的CSS文件,但是url()指向生成的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')}

根据a previous question,使用file-loader和require()可以很好地获取CSS的URL,但生成的文件不是纯CSS.

如何组合文件加载器和css-loader(可能还有其他加载器)来获取这个CSS文件？

谢谢！

附：我想避免使用copy-webpack-plugin,因为我希望CSS / font文件可以在代码中进行哈希处理和寻址.

.

解决方法

. 对于后代：这是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)$/,include: [/fonts/],options: {        name: '[hash].[ext]',outputPath: 'css/',publicPath: url => '../css/' + url      }    },}}

. . .. ...