загрузчик файлов для настройки шрифтов в Webpack

Question

Структура проекта

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

Используя file-loader для Webapck, я пытаюсь скомпилировать все sass / scss с URL-путем и переместить все файлы шрифтов в dist/my-project/fonts/.

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
   ...
}

Так, как скомпилировать правильный путь шрифта URL в файлах CSS, сохраняя этот outPath?

Answer 1

Решение состоит в том, чтобы использовать:

• publicPath для компиляции пути шрифтом css url
• outPath для перемещения файлов шрифтов в нужную директорию

Итак ...

{
    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/'
            }
        }
    ]
}