Konfigurasi Pembundelan CSS dalam Webpack
Cara yang telah dipelajari untuk menambahkan CSS ke halaman mungkin tidak terlalu ideal. Seringkali lebih nyaman untuk mengumpulkan semua file CSS dalam bundle terpisah dengan gaya.
Untuk ini, diperlukan plugin mini-css-extract-plugin. Mari kita instal:
npm install mini-css-extract-plugin --save-dev
Impor plugin tersebut:
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
Tambahkan ke konfigurasi plugins:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
Sekarang ganti style-loader dengan loader dari plugin kita:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Lakukan konfigurasi yang dijelaskan.
