Как загрузить и извлечь шрифты с помощью Webpack 4? - PullRequest
Новая
       5

Как загрузить и извлечь шрифты с помощью Webpack 4?

0 голосов
/ 01 декабря 2019

Я изучаю веб-пакет и нахожу некоторые проблемы, чтобы узнать

, какой загрузчик веб-пакетов удобен для загрузки шрифтов для их локального размещения, "URL-загрузчик" работает хорошо для меня

но он выдает шрифт как base64 , на который я не собираюсь походить, я хотел бы извлечь свои шрифты.

Я пытался "загрузчик файлов ", но, похоже, я не могу получить правильную конфигурацию или он не работает с webpack 4 Не знаю?

это мой конфиг, он работает хорошо, используя url loader : 

const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports={
    module:{
        rules:[
            {
                test:/.js$/,
                use:['babel-loader'],
                exclude:/node_modules/,

            },
            {
                test:/\.(pug)$/,
                loader:'pug-loader',
                query:{
                    pretty:false
                },
                exclude:/node_modules/,
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, 
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    }, 
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        }
                    } 
            ]
            },
            {
                test:/\.(png|jpe?g|gif)$/i,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name].[ext]',
                            outputPath:'imgs'
                        }
                    }
                ]
            },
            {
                test:/\.(woff)$/i,
                use:[
                    {
                        loader:'url-loader',
                    }
                ]
            },
        ]
    },

    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template:'./src/pug/home.pug',
            filename: "index.html",
        }),
        new HTMLWebpackPlugin({
            template:'./src/pug/about.pug',
            filename: "about.html",
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCSSAssetsPlugin({ 
            cssProcessorOptions: { 
                map: { 
                    inline: false, 
                    annotation: true, 
                } 
            } 
            })

    ],

}

и это моя древовидная структура: 

C:\~\src
├── assets
|  ├── fonts
|  |  ├── dorid-bold.woff
|  |  └── dorid-Medium.woff
|  └── images
├── index.js
├── pug
|  ├── about.pug
|  ├── abstracts
|  |  ├── base.pug
|  |  └── mixins.pug
|  ├── components
|  |  └── _social-comp.pug
|  ├── home.pug
|  └── layout
|     ├── _footer.pug
|     └── _header.pug
└── sass
   ├── abstracts
   |  ├── _func.scss
   |  ├── _mixin.scss
   |  └── _vars.scss
   ├── base
   |  ├── _base.scss
   |  └── _fonts.scss
   ├── components
   ├── layout
   |  ├── _footer.scss
   |  ├── _header.scss
   |  └── _nav.scss
   ├── main.scss
   ├── pages
   └── vendors
...