- Trang chủ
- Hướng dẫn học
- Hướng dẫn học webpack
- Webpack minify CSS - OptimizeCSSAssetsPlugin
Webpack minify CSS - OptimizeCSSAssetsPlugin
- Trước tiên bạn cần hiểu minify là gì, đó là file được loại bỏ tất cả các khoảng trống thừa, gom các dòng code lại thành một hàng duy nhất, giúp giảm tối đa dung lượng file, nhằm giúp tối ưu source code hơn.
- Với Webpack chúng ta có thể thực hiện việc này một cách tự động, bằng cách cài plugin và thiết lập cài đặt cho
webpack.config.js
Cài đặt và xử lý minify CSS
Để tạo được file minify CSS tự động, ta cần thực hiện các bước sau:
- Cài đặt plugin MiniCssExtractPlugin: plugin này có rất nhiều ứng dụng hay, sẽ giới thiệu ở bài khác nhe.
- Cài đặt plugin OptimizeCSSAssetsPlugin.
- Chỉnh
webpack.config.js
. - Chạy
npm run build
.
Cài đặt plugin MiniCssExtractPlugin
npm install --save-dev mini-css-extract-plugin
Kết quả
Cài đặt plugin OptimizeCSSAssetsPlugin
npm install --save-dev optimize-css-assets-webpack-plugin
Kết quả
Chỉnh file webpack.config.js
const path = require['path']; const HtmlWebpackPlugin = require['html-webpack-plugin']; const { CleanWebpackPlugin } = require['clean-webpack-plugin']; const MiniCssExtractPlugin = require['mini-css-extract-plugin']; const OptimizeCSSAssetsPlugin = require['optimize-css-assets-webpack-plugin']; module.exports = { optimization: { minimizer: [new OptimizeCSSAssetsPlugin[{}]], }, entry: { newfile: [ './src/index.js', './src/my-test.js' ] }, plugins: [ new CleanWebpackPlugin[], new HtmlWebpackPlugin[{ title: 'Output Management' }], new MiniCssExtractPlugin[{ filename: 'style.min.css' }] ], output: { filename: '[name].js', path: path.resolve[__dirname, 'dist'] }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, /*'style-loader',*/ 'css-loader' ] } ] } };
- Chú ý là nội dung trên không cần
style-loader
nhé, vì sau khi minify xong, thì ta cần chạy file trực tiếp. - Giải thích một chút về nội dung trên:
const MiniCssExtractPlugin = require['mini-css-extract-plugin'];
const OptimizeCSSAssetsPlugin = require['optimize-css-assets-webpack-plugin'];
- Gọi 2 plugin, và gán vào 2 biến
MiniCssExtractPlugin
vàOptimizeCSSAssetsPlugin
.
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin[{}]],
},
- Sử dụng
OptimizeCSSAssetsPlugin
tiến hành minify CSS.
new MiniCssExtractPlugin[{
filename: 'style.min.css'
}]
- Sử dụng plugin
MiniCssExtractPlugin
trả kết quả file với tênstyle.min.css
.
MiniCssExtractPlugin.loader,
- Load, thực thi plugin
MiniCssExtractPlugin
.
Chạy lệnh npm:
- Lúc này ta sẽ thấy bên trong thư mục
dist
sẽ xuất hiện 1 filestyle.min.css
đã được minizie từ filestyle.css
. - Đồng thời khi này, nội dung file
index.html
đã được tự động liên kết với filestyle.min.css
vừa tạo.