Build code với webpack hướng dẫn bạn dùng webpack để đóng gói code trong project thành code javascript chuẩn, gọn, an toàn, chạy nhanh. Thường dùng dùng cho việc publish dự án sau cùng lên mạng.
Build code với webpack
- Chuẩn bị project để build
- Thực hiện build code với webpack
- Cài và sử dụng thư viện lodash
- Build code với webpack cho 1 project đã có
Chuẩn bị project để build
1. Tạo folder Lab8 có cấu trúc folder như sau:

Trong đó folder src chứa các file .ts, .html và code javascript . Code chính của project là file index.ts
2. Cấu hình typescript
Tạo file tsconfig.json quy định cách build code cơ bản typescript trong project
{ "compilerOptions": { "outDir" : "src/js", "module": "es6", "allowJs": true, "target" : "ES2022", "allowSyntheticDefaultImports": true, "noImplicitAny": true, "removeComments" : true, }, }
3. Tạo vài module và sử dụng
a. Tạo module src/base.ts định nghĩa các class , hàm cơ bản….
export class Sanpham { id:number; tensp:string; giasp:number; hinh:string; } export interface IUser { id:number; hoten:string; email:string; } export function naplaiSauXGiay(x:number) { setTimeout(`location.reload()`, x * 1000); } export function chao(x:string) { alert((x == "") ? "Chào quý khách" : x); }
b. Tạo module src/config.ts và code
export const urlAPI:string = "http://localost:4000/hinh"; export const pageSize:number = 10;
c. Tạo file src/index.js và code
//index.ts import * as Base from './base' import * as CauHinh from './config' let sp = new Base.Sanpham; sp = {id: 1,tensp:'MSI I7 9300 T2', giasp:1565, hinh:''}; let user:Base.IUser = { id:1, hoten:'aa', email:'bb'} let url:string = CauHinh.urlAPI; let x = prompt('Nhập số'); console.log(user, url);
d. Tạo trang web hiện thông tin
<!-- index.html--> <head> </head> <body> <h1>Chào bạn</h1> </body> <script src="main.js"></script>
Biên dịch code typescript
Chạy lệnh sau trong folder project để biên dịch code typescript. Kiểm tra đảm bảo không còn lỗi để tiếp tục
tsc
Thực hiện build code với webpack
Sau đây là các bước thực hiện build code với webspack. Code project đã được chuẩn bị ở phần trên.
Cài webpack và các module cần dùng
Chạy lệnh sau trong folder project của bạn
npm i webpack @types/webpack webpack-cli typescript ts-loader @webpack-cli/generators declaration-bundler-webpack-plugin
Sau khi cài xong, project đã có các module cần dùng. Giờ thì tạo file cấu hình để cho webpack hoạt động.
Tạo file cấu hình cho webpack
Trước khi thực hiện đóng gói code với webpack, bạn cần tạo file cấu hình cho nó. Quá trình này sẽ có một số câu hỏi sau và trả lời gợi ý như sau:
- Which of the following JS solutions do you want to use? => TypeScript
- Do you want to use webpack-dev-server? => No
- Do you want to simplify the creation of HTML files for your bundle? => No
- Do you want to add PWA support? => No
- Which of the following CSS solutions do you want to use? => CSS Only
- Will you be using PostCSS in your project? => No
- Do you want to extract CSS for every file? => Yes
- Do you like to install prettier to format generated configuration? => Yes
- Pick a package manager? => npm
- Overwrite package.json? => Yes
- Overwrite src\index.ts? => No
- Overwrite index.html? => No
- Overwrite tsconfig.json? =>Yes
Chạy lệnh dưới đây trong folder project để tạo file cấu hình. Khi chạy bạn trả lời các câu hỏi như gợi ý phía trên:
npx webpack-cli init
Khi chạy xong, file webpack.config.js được tạo ra trong folder project. Xem nội dung sau cho biết. 🙂
const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const isProduction = process.env.NODE_ENV == "production"; const stylesHandler = MiniCssExtractPlugin.loader; const config = { entry: "./src/index.ts", output: { path: path.resolve(__dirname, "dist"), }, plugins: [ new MiniCssExtractPlugin(), ], module: { rules: [ { test: /\.(ts|tsx)$/i, loader: "ts-loader", exclude: ["/node_modules/"],}, { test: /\.css$/i, use: [stylesHandler, "css-loader"],}, { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, type: "asset",}, ], }, resolve: {extensions: [".tsx", ".ts", ".jsx", ".js", "..."],}, }; module.exports = () => { if (isProduction) config.mode = "production"; else config.mode = "development"; return config; };
– Mở file package.json: và thêm hoặc chỉnh giá trị các mục cho OK
"name": "tenproject", "version": "1.0.0", "description": "Lab 4", "keywords": [], "author": "tên sinh viên", "license": "ISC", "main": "index.js",
– Kiểm tra và bổ sung các thông số cần thiết của tsconfig.json, package.json đã lưu dự phòng với 2 file mới tạo (nếu cần)
Thực hiện build code
Chạy lệnh sau để build code với webpack
npm run build
Build xong, trong folder projeject sẽ có file main.js. Mở lên để xem nhé. Các hằng số sẽ đựợc thay thế bằng giá trị của nó, các biến khai báo mà không dùng cũng sẽ bị bỏ qua.
Chép các file html, css , images… cần thiết vào folder dist và giờ đây bạn đã có app javascript để dùng, bàn giao, publish lên mạng. Chúc mừng nhé 🙂
Cài và sử dụng thư viện lodash
- Trong folder project, chạy lệnh sau để cài lodash
npm i @types/lodash lodash
- Trong index.ts, import và sử dụng lodash
//index.ts import * as _ from "lodash"; let str = _.padStart("Hello TypeScript!", 20, " "); console.log(str); str = _.join(['a','b','c','d'],'-'); console.log(str);
- Biên dịch typescripty với lệnh tsc
- Đóng gói với lodash với lệnh npm run build , sẽ thấy file main.ts size lớn lên vì đã được nhúng lodash vào
- Test thử bằng cách mở file index.html để xem.
- Mởi bạn test thêm với một vài hàm thường dùng khác của lodash
Build code với webpack cho 1 project đã có
Sau khi thực tập như trên, để hiểu thêm bạn hãy thực tập thử build code với webpack cho 1 project nào đó đã có. Như Lab 7, lab 4 chẳng hạn.
Cần tham khảo thêm, xem link này nhé
- https://webpack.js.org/guides/typescript/
- https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html