webpack 6 - garevna/js-course GitHub Wiki

Создадим папку 📂 images в корневой папке нашего проекта
и поместим туда несколько файлов изображений:

Добавим в файл 📝 script.js
код, который будет добавлять на страницу два элемента span
с классами git-bush и git

Далее внесем соответствующие изменения в файл
📝 main.css ( :open_file_folder css )

( добавим соответствующие классы )

import promise from './promise.js'
import css from '../css/main.css'

promise.then ( response =>
    document.querySelector ( '.sampleClass' )
        .innerText += response )

document.body.appendChild (
    document.createElement ( 'span' )
).className = 'git-bush'

document.body.appendChild (
    document.createElement ( 'span' )
).className = 'git'

body {
    position: fixed;
    top: 0;
    left:0;
    bottom:0;
    right:0;
    background-image: url(../images/columns.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    font-family: monospace, Arial;
    font-size: 16px;
    color: #abc;
}
.sampleClass {
    font-size: 25px;
    font-weight: bold;
}
.git-bush, .git {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.git-bush {
    background-image: url(../images/git-bush.png);
}
.git {
    background-image: url(../images/git.png);
}

Установим загрузчик file-loader

npm install --save-dev file-loader

и внесем необходимые изменения в файл конфигурации

const path = require ( 'path' )

module.exports = {
    entry: { main: './js/script.js' },
    output: {
        path: path.resolve ( __dirname, 'build' ),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jp?g|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                  ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },

        ]
    }
}

Обратите внимание, что после сборки приложения
все файлы изображений, ссылки на которые были в файле 📝 main.css,
оказались в папке 📂 images,
которая была создана в папке 📂 build

webpack резолвит любые выражения url(), которые встретит в css-файлах, а также ссылки на изображения из скрипта

webpack может встраивать ресурсы с помощью загрузчика url-loader

url-loader преобразует изображение в код base64 URI

и встраивает в код JavaScript

Это позволяет сократить количество запросов к серверу, однако приводит к увеличению размеров результирующего файла сборки

url-loader имеет опциею limit, которая позволяет управлять процессом встраивания файлов изображений в зависимости от их размеров

Свойство limit url-loader - это максимально допустимый для встраивания размер файла (в байтах)

Таким образом, небольшие по размеру файлы изображений можно встроить в файл сборки, а для больших создавать копии

⚠️ При использовании опции limit необходимо установить как url-loader, так и file-loader

В случае использования опции limit url-loader передает возможные дополнительные параметры для file-loader

{
    test: /\.(jpg|png)$/,
    use: {
        loader: "url-loader",
        options: {
            limit: 25000,
        },
    },
},

⚠️ При передаче параметров загрузчику его не добавляют в свойство use в виде строки

потому что теперь это будет объект с двумя свойствами: имя загрузчика и параметры

Если файл изображения большой, вместо url-loader будет использоваться file-loader, который просто создаст копию файла

Итак, установим url-loader в папке проекта и внесем изменения в файл конфигурации webpack:

const path = require ( 'path' )

module.exports = {
    entry: { main: './js/script.js' },
    output: {
        path: path.resolve ( __dirname, 'build' ),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jp?g|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 25000,
                        name: 'images/[name].[ext]'
                    },
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

Прежде, чем запускать сборку, очистим папку build/images, чтобы убедиться, что теперь в нее попадут только большие файлы, а маленькие будут встроены в файл сборки

После сборки посмотрим в консоли, как подключены маленькие файлы изображений:

Файлы были конвертированы в строку base64 и встроены в сборку