Ассеты в CSS бандлах Webpack
Давайте теперь сделаем так, чтобы пути к .png
файлам заменялись в CSS файлах при сборке:
webpack.config.jsexport default {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve("dist"),
},
module: {
rules: [
{
test: /\.png$/,
type: "asset/resource",
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.[contenthash].css",
}),
new HtmlWebpackPlugin(),
],
};
Давайте проверим, как это работает. Подключим к точке входа картинку и файл со стилями:
/src/index.jsimport './images/img.png';
import './styles.css';
Пусть у файле со стилями мы используем путь к картинке:
/src/styles.cssbody {
background: url('images/img.png');
}
После сборки в CSS
бандле путь к картинке будет изменен на новый:
/dist/bundle.hgyt5879vkh8.cssbody {
background: url('верный_путь_от_корня');
}