> For the complete documentation index, see [llms.txt](https://michey85.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://michey85.gitbook.io/webpack/images.md).

# Images

Когда мы хотим импортировать картинки в js, нам нужно обрабатывать их через webpack. В 4-й версии для этого использовался file-loader ( || url-loader для преобразования маленьких картинок в base64). В webpack 5 появилась система модулей, которая позволяет более гибко настраивать то же самое, без установки дополнительных лоадеров.

```javascript
module.exports = {

    output: {
        // Правила для работы с модулями, размещение и нейминг
        assetModuleFilename: "image/[hash][ext][query]",
    },

    module: {
        rules: [
            {
                test: /\.(png,|jpe?g|gif|svg)$/i,
                type: "asset", // либо "asset-resource" - картинка попадет в корень сборки, автоматом переименуется
            }
        ]
    }

}
```

По умолчанию картинки менее 8Кб будут переведены в base64. Если хотим, можем это дополнительно настроить.

```javascript
module.exports = {
    output: {
        assetModuleFilename: "image/[hash][ext][query]",
    },

    module: {
        rules: [
            {
                test: /\.(png,|jpe?g|gif|svg)$/i,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024,
                    }
                }
            }
        ]
    }

}
```

### Картинки в стилях

Если мы используем `url` картинок в стилях, то может понадобиться донастроить плагин mini-css-extract-plugin.

```javascript
module.exports = {

    module: {
        rules: [
            {
                test: /\.css/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: { publicPath: ''}
                    },
                    "css-loader"
                ],
            }
        ]
    },


    plugins: [
        new MiniCssExtractPlugin(),
    ],
}
```