1. Cài đặt thư viện
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//webpack core: npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react //webpack server npm i -D webpack webpack-cli webpack-dev-server //css loader npm i -D style-loader css-loader sass sass-loader //file loader npm i -D file-loader //typscript loader npm i -D typescript ts-loader //plugin: dọn dẹp thư mục dist, tạo file html, tách file css npm i -D clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin // plugin thống kê dung lượng file Weboack npm i -D webpack-bundle-analyzer |
|
1 2 |
<!-- Full Install :D --> npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server style-loader css-loader sass sass-loader file-loader typescript ts-loader html-webpack-plugin mini-css-extract-plugin webpack-bundle-analyzer |
2. Tạo file ./webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); module.exports = (env = {}, options = {}) => { return { entry: { bundle: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ // Loader file js, jsx => preset-env để chuyển ES6 trở lên về ES5, preset-react chuyển JSX về ES5 { test: /\.js$|\.jsx$/i, use: { loader: 'babel-loader', options: { "presets": ["@babel/preset-env", "@babel/preset-react"] } }, include: path.resolve(__dirname, 'src'), exclude: /node_modules/, }, // Loader file css, scss, sass // Ở mode development => inject css vào thẻ "<style></style>" cho tốc độ nhanh hơn // Ở mode production => tạo ra file css mới bằng "MiniCssExtractPlugin" để load file nhanh hơn { test: /\.(sa|sc|c)ss$/i, use: [ ((mode) => { if (mode == "development") return "style-loader" if (mode == "production") return MiniCssExtractPlugin.loader })(options.mode), "css-loader", "sass-loader" ], include: path.resolve(__dirname, 'src'), }, // Loader file, trường hợp này là loader ảnh :D { test: /\.(png|jpe?g|gif|svg)$/i, loader: 'file-loader', options: { outputPath: 'images', name: '[name]_[hash:base64:5].[ext]', }, }, ] }, plugins: [ // Dọn dẹp thư mục /dist new CleanWebpackPlugin(), // Tạo ra file HTML bằng plugin new HtmlWebpackPlugin({ templateContent: `<html><head><meta charset="UTF-8"></head><body><div id="app"></div></body></html>`, meta: { 'viewport': 'width=device-width, initial-scale=1.0' }, }), //Tách css thành 1 file riêng bằng plugin new MiniCssExtractPlugin() ], // Hiển thị khi build stats: { modules: false, }, // Cài đặt webpack-server devServer: { static: path.resolve(__dirname, 'dist'), port: 5556, }, } }; |
3. Sử dụng CSS trong dự án
Dạng 1. Sử dụng dạng global
|
1 2 |
import './reset.css' import './index.scss' |
Dạng 2. Sử dụng dạng module
-- Cài đặt webpack-config
|
1 2 3 4 5 6 7 8 9 10 11 |
{ loader: "css-loader", options: { esModule: true, modules: { namedExport: true, localIdentName: "[name]__[local]__[hash:base64:5]", }, }, }, "sass-loader" |
|
1 2 |
import * as styles from './header.css' import * as styles from './main.scss' |
Dạng 3. Sử dụng dạng CSS-in-JS
- Cách này không cần sử dụng webpack
- Sử dụng các thư viện ngoài như: style-component