CSS bundle összeállítás beállítása Webpackben
A tanult módszer a CSS oldalhoz adására lehet, hogy nem túl szerencsés. Gyakran kényelmesebb az összes CSS fájlt egy külön stílusokból álló bundle-be összeállítani.
Ehhez szükség van a mini-css-extract-plugin pluginre. Telepítsük le:
npm install mini-css-extract-plugin --save-dev
Importáljuk:
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
Adjuk hozzá a plugins beállításhoz:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
Most cseréljük le a style-loader-t a pluginünk betöltőjére:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Végezze el a leírt beállításokat.
