Как убрать или изменить обработку картинок и шрифтов в css-loader в Webpack?

Question

[Владимир]

Когда, я собираю проект, css-loader обрабатывает файл со стилями и все картинки, которые использованы как background, и файл со шрифтом, который скачен и подключен в стилях, он копирует в корень проекта меняя название на хэш.


file-loader у меня есть и он работает как надо. Вот настройки моего Webpack

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'],
            },
            
        ]
    }
}

Надеюсь, я точно передал суть проблемы). Меня интересует почему css-loader копирует картинки с шрифтами и как это исправить ? Спасибо за внимание.

Answer 1

[Иван Кулаков]

Копирует, потому что эти правила прописаны в твоей конфигурации.
Попробуй так:

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

Comments

[Владимир]

Большое спасибо)))