Phân tích javascript độc hại

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 webpack từ CLI hoặc API của nó. Nếu bạn vẫn chưa quen với webpack, vui lòng đọc qua các khái niệm cốt lõi và phần so sánh này để tìm hiểu lý do tại sao bạn có thể sử dụng nó thay vì các công cụ khác đã có trong cộng đồng

Thiết lập cơ bản

Trước tiên, hãy tạo một thư mục, khởi tạo npm, cài đặt webpack cục bộ và cài đặt

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

2 [công cụ được sử dụng để chạy webpack trên dòng lệnh]

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

Xuyên suốt Hướng dẫn, chúng tôi sẽ sử dụng các khối

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

3 để cho bạn thấy chúng tôi đang thực hiện những thay đổi nào đối với thư mục, tệp và mã. Ví dụ

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

Bây giờ chúng ta sẽ tạo cấu trúc thư mục sau, các tệp và nội dung của chúng

dự án

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

src/chỉ mục. js

mục lục. html

  
    
    Getting Started
    
  
  
    
  

Chúng tôi cũng cần điều chỉnh tệp

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

4 của mình để đảm bảo rằng chúng tôi đánh dấu gói hàng của mình là

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

5, cũng như xóa mục nhập

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

6. Điều này là để ngăn việc vô tình xuất bản mã của bạn

bưu kiện. json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 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 định giữa

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

7

Trong thiết lập này,

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

8 yêu cầu rõ ràng phải có

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

9 và liên kết nó là

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

0 [không gây ô nhiễm phạm vi toàn cầu]. Bằng cách nêu rõ những phụ thuộc mà mô-đun cần, webpack có thể sử dụng thông tin này để xây dựng biểu đồ phụ thuộc. Sau đó, nó sử dụng biểu đồ để tạo một gói được tối ưu hóa trong đó các tập lệnh sẽ được thực thi theo đúng thứ tự

Như đã nói, hãy chạy

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

1, tập lệnh này sẽ lấy tập lệnh của chúng ta tại

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

2 làm điểm vào và sẽ tạo ra

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

3 làm đầu ra. Lệnh

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

4, đi kèm với Nút 8. 2/npm 5. 2. 0 trở lên, chạy tệp nhị phân webpack [

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

5] của gói webpack mà chúng tôi đã cài đặt lúc đầu

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

9

Mở

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

6 từ thư mục

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

7 trong trình duyệt của bạn và nếu mọi thứ đều ổn, bạn sẽ thấy văn bản sau.

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

8

mô-đun

Các câu lệnh

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

9 và

  
    
    Getting Started
    
  
  
    
  

0 đã được chuẩn hóa trong ES2015. Chúng được hỗ trợ trong hầu hết các trình duyệt tại thời điểm này, tuy nhiên có một số trình duyệt không nhận ra cú pháp mới. Nhưng đừng lo lắng, webpack hỗ trợ chúng ngay lập tức

Đằng sau hậu trường, webpack thực sự "phiên mã" mã để các trình duyệt cũ hơn cũng có thể chạy nó. Nếu bạn kiểm tra

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

3, bạn có thể thấy webpack làm điều này như thế nào, nó khá tài tình. Bên cạnh

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

9 và

  
    
    Getting Started
    
  
  
    
  

0, webpack cũng hỗ trợ nhiều cú pháp mô-đun khác, xem API mô-đun để biết thêm thông tin

Lưu ý rằng webpack sẽ không thay đổi bất kỳ mã nào ngoài câu lệnh

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

9 và

  
    
    Getting Started
    
  
  
    
  

0. Nếu bạn đang sử dụng các tính năng khác của ES2015, hãy đảm bảo sử dụng trình chuyển mã như Babel thông qua hệ thống trình tải của webpack

Sử dụng Cấu hình

Kể từ phiên bản 4, webpack không yêu cầu bất kỳ cấu hình nào, nhưng hầu hết các dự án sẽ cần thiết lập phức tạp hơn, đó là lý do tại sao webpack hỗ trợ tệp cấu hình. Điều này hiệu quả hơn nhiều so với việc phải nhập thủ công nhiều lệnh trong thiết bị đầu cuối, vì vậy hãy tạo một lệnh

dự án

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

0

gói web. cấu hình. js

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

1

Bây giờ, hãy chạy lại bản dựng nhưng thay vì sử dụng tệp cấu hình mới của chúng tôi

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

2

Một tệp cấu hình cho phép linh hoạt hơn nhiều so với việc sử dụng CLI. Chúng tôi có thể chỉ định quy tắc trình tải, plugin, tùy chọn giải quyết và nhiều cải tiến khác theo cách này. Xem tài liệu cấu hình để tìm hiểu thêm

Tập lệnh NPM

Do việc chạy một bản sao webpack cục bộ từ CLI không thú vị lắm, chúng ta có thể thiết lập một phím tắt nhỏ. Hãy điều chỉnh gói của chúng tôi. json bằng cách thêm tập lệnh npm

bưu kiện. json

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

3

Bây giờ, lệnh

  
    
    Getting Started
    
  
  
    
  

6 có thể được sử dụng thay cho lệnh

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

4 mà chúng ta đã sử dụng trước đó. Lưu ý rằng trong

  
    
    Getting Started
    
  
  
    
  

8, chúng tôi có thể tham chiếu các gói npm được cài đặt cục bộ theo tên giống như cách chúng tôi đã làm với

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

4. Quy ước này là tiêu chuẩn trong hầu hết các dự án dựa trên npm vì nó cho phép tất cả những người đóng góp sử dụng cùng một tập lệnh chung

Bây giờ hãy chạy lệnh sau và xem bí danh tập lệnh của bạn có hoạt động không

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

0

Phần kết luận

Bây giờ bạn đã có bản dựng cơ bản cùng nhau, bạn nên chuyển sang hướng dẫn tiếp theo

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   }
 }

0 để tìm hiểu cách quản lý nội dung như hình ảnh và phông chữ bằng webpack. Tại thời điểm này, dự án của bạn sẽ trông như thế này

dự án

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

1

Nếu bạn muốn tìm hiểu thêm về thiết kế của webpack, bạn có thể xem các khái niệm cơ bản và trang cấu hình. Hơn nữa, phần API đào sâu vào các giao diện khác nhau mà webpack cung cấp