Ở phần này mình sẽ trình bày những vấn đều sau
- Khởi tạo dự án và cài đặt các thư viện
- Giải thích cách bắt đầu dự án với webpack
PROJECT_HOME: là thư mục gốc chứa dự án
--save-dev
: Nghĩa là chỉ sử dụng ở môi trường DEV, môi trường chạy thực không sử dụng những thư viện này.
--save
: Nghĩa là những thư viện cần khi chạy ứng dụng ở môi trường thực.
cd $PROJECT_HOME
mkdir FE-UserManagement
npm init
# Cài đặt thư viện webpack
npm i webpack webpack-cli --save-dev
# Cài đặt Babel, bạn cần thư viện này để chuyển các mã code ở các phiên bản cao về ES5 và biên dịch code React sang javascript
# Lý do chúng ta cần chuyển về phiên bản ES5 là các trình duyệt chưa hỗ trợ đầy đủ các phiên bản cao hơn.
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
# Cài đặt thư viện ReactJS
npm i react react-dom -save
# Cài thư viện sinh mã html
npm i html-webpack-plugin --save-dev
# Thư viện này dùng để khởi tạo server ở local. Server ở phía môi trường DEV là bắt buộc trong quá trình phát triển dự án
npm i webpack-dev-server --save-dev
# Cài các bộ loader khác cho webpack để đọc file css, scss
npm i style-loader css-loader sass-loader node-sass --save-dev
- File
.babelrc
dùng để cấu hình Babel, bạn có thể tạo với nội dung như sau
{
"presets": [
"@babel/env",
"@babel/react"
]
}
- File
webpack.config.js
để cấu hình Webpack
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(css|s[ac]ss)$/i,
use: [
'style-loader',
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
},
}
]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
- Thêm scripts vào
package.json
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}
npm run start
Sau khi chạy server xong bạn bật browser ở địa chỉ http://localhost:8080/ để xem kết quả
Tips
- Nếu bạn muốn tự bật Browser thì thêm tham số
--open
- Nếu bạn muốn chỉ rebuild những module được thay đổi thôi thì thêm tham số
--hot
npm run build
Các file output sẻ được tạo ra trong thư mục dist