close

Hướng Dẫn Webpack cho Người Mới Bắt Đầu

Webpack là một công cụ rất hữu ích trong quá trình phát triển web hiện đại, giúp bạn quản lý và tối ưu hóa các tài nguyên của dự án. Dưới đây là một hướng dẫn cơ bản cho người mới bắt đầu về cách sử dụng Webpack:

Cài đặt Webpack

Trước hết, bạn cần cài đặt Node.js nếu chưa có. Sau đó, tạo một thư mục cho dự án và mở Terminal/Cửa sổ dòng lệnh tại thư mục đó. Chạy các lệnh sau để cài đặt Webpack và webpack-cli (giao diện dòng lệnh của Webpack):

npm install webpack webpack-cli --save-dev

Tạo cấu hình Webpack

Tạo một tệp có tên webpack.config.js trong thư mục gốc của dự án. Đây là nơi bạn sẽ định cấu hình cho Webpack.

const path = require('path');

module.exports = {
  entry: './src/index.js', // Điểm vào của ứng dụng
  output: {
    filename: 'bundle.js', // Tên tệp đầu ra
    path: path.resolve(__dirname, 'dist') // Thư mục đầu ra
  }
};

Tạo thư mục và tệp

Tạo thư mục src trong thư mục gốc và trong đó tạo một tệp có tên index.js để làm tệp chính của ứng dụng của bạn.

Chạy Webpack

Mở Terminal và chạy lệnh sau để biên dịch mã nguồn của bạn bằng Webpack:

npx webpack

Sau khi chạy lệnh này, Webpack sẽ tìm theo cấu hình, biên dịch tệp index.js và tạo tệp đầu ra bundle.js trong thư mục dist.

Sử dụng trong HTML

Tạo một tệp HTML trong thư mục dist hoặc thư mục riêng của bạn và liên kết tới tệp bundle.js:

<!DOCTYPE html>
<html>
<head>
  <title>Webpack App</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Chạy ứng dụng

Mở tệp HTML trong trình duyệt và kiểm tra xem ứng dụng của bạn hoạt động hay không.

Đây chỉ là một hướng dẫn cơ bản. Webpack có rất nhiều tính năng mạnh mẽ khác như xử lý CSS, quản lý module, sử dụng loaders và plugins, tối ưu hóa mã nguồn, và nhiều hơn nữa. Hãy tìm hiểu thêm qua tài liệu chính thức của Webpack để tận dụng hết khả năng của công cụ này.