Build code với webpack

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

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é

BÀI VIẾT LIÊN QUANXEM THÊM