How to remove or change the processing of images and fonts in the css-loader in Webpack?

Question

webpack

When I build the project, css-loader processes the style file and all the images that are used as background, and the file with the font that is downloaded and included in the styles, it copies it to the root of the project, changing the name to a hash.


I have file-loader and it works as it should. Here are my webpack settings

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

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
console.log('IS DEV :',isDev)

const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`;

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './js/main.js'
    },
    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist'),
    },
    plugins:[
        new HTMLWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: isProd
            }
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: filename('css')
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(?:|otf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: `./fonts/${filename('[ext]')}`
                    }
                }],
            },
            {
                test: /\.(?:|gif|png|jpg|jpeg|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: `./images/${filename('[ext]')}`
                    }
                }],
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            
        ]
    }
}

I hope I accurately conveyed the essence of the problem). I'm wondering why css-loader copies pictures with fonts and how to fix it? Thank you for your attention.

Answer 1

Copies, because these rules are written in your configuration.
Try like this:

{
  loader: 'css-loader',
  options: { url: false, importLoaders: 1 }
},