Penyelenggaraan Pembungkusan CSS dalam Webpack
Cara menambahkan CSS ke halaman yang telah dipelajari mungkin tidak begitu sesuai. Sering kali lebih mudah untuk mengumpulkan semua fail CSS dalam bundle stylesheet yang berasingan.
Untuk ini, plugin mini-css-extract-plugin diperlukan. Mari kita pasangkannya:
npm install mini-css-extract-plugin --save-dev
Import plugin tersebut:
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
Tambahkan dalam konfigurasi plugins:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
Sekarang gantikan style-loader dengan loader dari plugin kami:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Lakukan konfigurasi yang diterangkan.
