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

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

/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?


path webpack-file-loader webpack-4
person J.BizMai    schedule 02.10.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Решение заключается в использовании:

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

So...

{
    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/'
            }
        }
    ]
}
person J.BizMai    schedule 02.10.2019