Konfiguracja budowania CSS w bundle w Webpack
Poznany sposób dodawania CSS do strony może nie być zbyt udany. Często bardziej wygodnie jest zebrać wszystkie pliki CSS w oddzielny bundle ze stylami.
Do tego potrzebna jest wtyczka mini-css-extract-plugin. Zainstalujmy ją:
npm install mini-css-extract-plugin --save-dev
Zaimportujmy ją:
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
Dodajmy do konfiguracji plugins:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
Teraz zamieńmy style-loader na loader z naszej wtyczki:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Wykonaj opisane konfiguracje.
