webpack 6

💼 Упражнение 6

✅ file-loader

---

🔗 file-loader

🔗 loaders

---

📂 images

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

📂 js

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

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

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

📝 script.js

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'

📝 main.css

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

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

npm install --save-dev file-loader

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

📝 webpack.config.js

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