Webpack 4: mini-css-extract-plugin + загрузчик файлов не загружает ресурсы

Question

Я пытаюсь переместить ресурсы (изображения и шрифты), используемые в одном из моих .scss файлов, но кажется, что они игнорируются:

Это мои .scss file:

@font-face {
    font-family: 'myfont';
    src: url('../../assets/fonts/myfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

body {
    color: red;
    font-family: 'myfont';
    background: url('../../assets/images/bg.jpg');
}

А это мой webpack.config.js :

const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    target: 'node',
    entry: path.resolve(__dirname, 'server.tsx'),
    output: {
        filename: 'server_bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/build'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(tsx|ts)?$/,
                loader: 'awesome-typescript-loader',
                options: {
                    jsx: 'react'
                }
            },
            {
                test: /\.(scss|sass|css)$/,                
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } },                    
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                loader: 'file-loader',
                options: { outputPath: 'public/images' }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: { outputPath: 'public/fonts' }
            }
        ]
    },
    plugins: [
        new CheckerPlugin(),
        new MiniCssExtractPlugin({
            filename: 'public/styles_bundle.css',
            chunkFilename: "public/styles/[id].css"
        })
    ]
}

Я получаю этот .css файлв моем браузере в качестве вывода ( обратите внимание на название изображения ):

body {
  color: red;
  background: url("../../assets/images/myimage.jpg"); 
}

И в моем каталоге public я получаю это:

public/
    styles_bundle.css

Здесь есть две проблемы:

1. Шрифты не скомпилированы ( Нет общедоступных / fonts / etc ... )
2. Изображения не скомпилированы

Я пробовал все, но я не знаю, что здесь может происходить ... Есть идеи?

Answer 1

нужен url-загрузчик

           {
               test: /\.(jpg|png|gif|woff|eot|ttf|svg)/,
                use: {
                    loader: 'url-loader', // this need file-loader
                    options: {
                        limit: 50000

                    }
                }
           }

Answer 2

Я только что исправил подобную проблему.Если вы измените опцию url на true, вы можете увидеть ошибочные ссылки на URL изображения.

{ loader: 'css-loader', options: { url: false, sourceMap: true } },

Или вы можете вручную проверить правильность ссылки на путь.

url('../../assets/images/bg.jpg')

Я думаю, что папка с изображениями не создается, потому что все ссылки на ресурсы изображения неверны.

Для проблемы, которую я исправил, все ссылки были неправильными, и я не мог 't исправить их, поэтому я просто использовал этот плагин для копирования веб-пакетов , чтобы скопировать файлы в нужную папку dist.