Path 用于Web包中字体配置的文件加载器

项目结构

/dev
-/fonts
-/css
  -/vendors
    -/fontawesome
      -/webfonts
/dist
-/my-project
  -/fonts

使用Webapck的

文件加载器

，我试图用url路径编译所有sass/SCS，并将所有字体文件移动到

dist/my project/font/

webpack.config.js

module.exports = env => {
    ...
    return{
        ...
        output: {
            path: path.resolve(__dirname, 'dist/'),
        },
        module: {
            rules: [
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: './my-project/fonts/',
                            context: './fonts/'
                        }
                    }
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: './my-project/fonts/',
                            context: 'css/vendors/'
                        }
                    }
                ]
            }
            ]
        }
    }
}          

此配置可以在正确的位置复制文件，但在css中，我得到了以下信息：

@font-face{
   font-family:'Font Awesome 5 Brands';
   font-style:normal;
   font-weight:normal;
   font-display:auto;
   src:url(my-project/fonts/fa-brands-400.eot); //<--instead of fonts/fa-brands-400.eot
   ...
}

@font-face{
字体系列：'font Awesome 5品牌'；
字体风格：普通；
字体大小：正常；
字体显示：自动；
src:url（my project/font/fa-brands-400.eot）；//解决方案是使用：


publicPath
以css url字体编译路径
outPath
将字体文件移动到正确的目录中

所以

{
测试：/\（woff（2）| ttf | eot | svg）（\？v=\d+\.\d+\.\d+）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：'[name].[ext]'，
publicPath:“./fonts/”，//解决方案是使用：


publicPath
以css url字体编译路径
outPath
将字体文件移动到正确的目录中

所以

{
测试：/\（woff（2）| ttf | eot | svg）（\？v=\d+\.\d+\.\d+）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：'[name].[ext]'，
publicPath:“./fonts/”//
{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                publicPath: './fonts/', //<--resolve the path in css files
                outputPath: './my-project/fonts/', //<-- path to place font files
                context: 'css/vendors/'
            }
        }
    ]
}