Cấu hình đóng gói CSS thành bundle trong Webpack
Cách thêm CSS vào trang đã học có thể không phải là cách tối ưu. Thông thường, việc gom tất cả các file CSS thành một bundle riêng chứa styles sẽ thuận tiện hơn.
Để làm điều này, cần có plugin mini-css-extract-plugin. Hãy cài đặt nó:
npm install mini-css-extract-plugin --save-dev
Import nó:
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
Thêm vào cấu hình plugins:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
Bây giờ hãy thay thế style-loader bằng loader từ plugin của chúng ta:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Hãy thực hiện các cấu hình đã mô tả.
