31
4
webpack được sử dụng để biên dịch các mô-đun JavaScript. Sau khi cài đặt, bạn có thể tương tác với nó thông qua webpack CLI hoặc API. Nếu bạn chưa quen với webpack, hãy đọc Các khái niệm và so sánh cốt lõi để tìm hiểu lý do bạn nên sử dụng webpack thay vì các công cụ khác trong cộng đồng.
Phiên bản Node.js tối thiểu chạy webpack 5 là 10.13.0 (LTS).
Đầu tiên chúng ta tạo một thư mục, khởi tạo npm, sau đó cài đặt webpack cục bộ và sau đó cài đặt webpack-cli (công cụ này được sử dụng để chạy webpack từ dòng lệnh):
Trung tâm cá nhân
Điều phát hành
từ bỏ
mkdir webpack-demo cd webpack-demo npm init -y npm cài đặt webpack webpack-cli --save-dev
Trong suốt hướng dẫn này, chúng tôi sẽ sử dụng các khối khác biệt để hiển thị các thay đổi được thực hiện đối với thư mục, tệp và mã. Ví dụ:
đây là dòng mới bạn phải sao chép vào mã của mình và đây là dòng cần xóa khỏi mã và đây là dòng không được động vào.
Bây giờ chúng ta sẽ tạo cấu trúc thư mục, tệp và nội dung sau:
dự án .
webpack-demo |- package.json |- package-lock.json |- index.html |- /src |- index.js
src/index.js 。
function thành phần() { const element = document.createElement('div'); // lodash (hiện được giới thiệu thông qua tập lệnh) là cần thiết để thực thi dòng này element.innerHTML = _.join(['Hello', 'webpack' ] , ''); trả về phần tử; } document.body.appendChild(comComponent());
index.html 。
Khóa Xem sitemap của VNExpress
Chúng ta cũng cần điều chỉnh tệp pack.json để đảm bảo rằng gói chúng ta cài đặt là riêng tư và xóa mục chính. Điều này ngăn chặn việc vô tình xuất bản mã của bạn.
gói.json 。
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "private": true, "scripts": { "test": "echo \"Lỗi: không chỉ định bài kiểm tra\" && thoát 1" }, "keywords": [], "author": "", "license": "MIT", "devDependencies": { "webpack": "^5.38.1", "webpack-cli": "^4.7.2" } }
Trong ví dụ này, có sự phụ thuộc ngầm giữa các thẻ
Xem sitemap của VNExpress