Bắt đầu với Webpack [Với dự án ví dụ]

Gói web là một gói mô-đun tạo điều kiện xây dựng các ứng dụng JavaScript phức tạp. Nó đã đạt được lực kéo nghiêm trọng kể từ khi cộng đồng React chọn nó làm công cụ xây dựng chính. Webpack là không phải là người quản lý gói hay người chạy nhiệm vụ vì nó sử dụng một cách tiếp cận khác (nâng cao hơn), nhưng mục tiêu của nó cũng là thiết lập quy trình xây dựng động.

Webpack hoạt động với JavaScript vanilla. Bạn có thể sử dụng nó để gói các tài sản tĩnh của một ứng dụng, chẳng hạn như hình ảnh, phông chữ, bảng định kiểu, tập lệnh vào một tệp trong khi chăm sóc tất cả các phụ thuộc.

Bạn sẽ không cần Webpack để tạo một ứng dụng hoặc trang web đơn giản, ví dụ: một ứng dụng chỉ có một tệp JavaScript và một tệp CSS và một vài hình ảnh, tuy nhiên nó có thể là một trình cứu sinh cho một ứng dụng phức tạp hơn với một số tài sản và phụ thuộc.

Webpack so với người chạy nhiệm vụ so với Browserify

Vậy, Webpack xếp chồng lên nhau như thế nào so với các công cụ xây dựng khác chẳng hạn như Grunt, Gulp hoặc Browserify?

Grunt và Gulp là những người chạy nhiệm vụ. Trong tập tin cấu hình của họ, bạn chỉ định các nhiệm vụ, và người chạy nhiệm vụ thực thi chúng. Các quy trình làm việc của một người chạy nhiệm vụ về cơ bản trông như thế này:

Tuy nhiên, Webpack là một gói mô-đun phân tích toàn bộ dự án, thiết lập một cây phụ thuộc, và tạo một tệp JavaScript đi kèm nó phục vụ cho trình duyệt.

Browserify gần với Webpack hơn là trình chạy tác vụ, vì nó cũng tạo một biểu đồ phụ thuộc nhưng nó chỉ làm vậy cho các mô-đun JavaScript. Webpack tiến thêm một bước và nó không chỉ gói mã nguồn mà còn các tài sản khác chẳng hạn như hình ảnh, bảng định kiểu, phông chữ, v.v..

Nếu bạn muốn biết thêm về Webpack so sánh với các công cụ xây dựng khác như thế nào, Tôi khuyên bạn nên hai bài viết:

1. Andrew Ray Webpack: Khi nào nên sử dụng và tại sao trên blog riêng của anh ấy
2. Nhà Cory Trình duyệt vs Webpack trên freeCodeCamp (với hình minh họa tuyệt vời)

Hai minh họa trên là từ Tài liệu Webpack của cẩm nang Pro React, một tài nguyên khác đáng để xem.

Bốn khái niệm cốt lõi của Webpack

Webpack có bốn tùy chọn cấu hình chính được gọi là “khái niệm cốt lõi” mà bạn sẽ cần xác định trong quá trình phát triển:

1. Nhập cảnh - các điểm khởi đầu của biểu đồ phụ thuộc (một hoặc nhiều tệp JavaScript).
2. Đầu ra - tập tin mà bạn muốn đầu ra được gói vào (một tệp JavaScript).
3. Máy xúc lật - biến đổi trên các tài sản mà biến chúng thành các mô-đun Webpack để họ có thể được thêm vào biểu đồ phụ thuộc. Ví dụ, css-loader được sử dụng để nhập các tệp CSS.
4. bổ sung - hành động tùy chỉnh và chức năng thực hiện trên bó. Chẳng hạn, i18n-webpack-plugin nhúng nội địa hóa vào gói.

Trình tải hoạt động trên cơ sở mỗi tệp trước khi quá trình biên dịch diễn ra. Các plugin được thực thi trên mã đi kèm, vào cuối quá trình biên dịch.

Cài đặt Webpack

Đến cài đặt Webpack, mở dòng lệnh, điều hướng đến thư mục dự án của bạn và chạy lệnh sau:

 npm init 

Nếu bạn không muốn tự mình thực hiện cấu hình, bạn có thể thực hiện npm dân cư pack.json tập tin với các giá trị mặc định với lệnh sau:

 npm init -y 

Tiếp theo, cài đặt Webpack:

 npm cài đặt webpack --save-dev 

Nếu bạn đã sử dụng các giá trị mặc định thì đây là cách của bạn pack.json tệp sẽ trông giống như bây giờ (các thuộc tính có thể theo thứ tự khác):

 "name": "_tests", "phiên bản": "1.0.0", "description": "", "main": "webpack.config.js", "phụ thuộc": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ " ": []," tác giả ":" "," giấy phép ":" ISC " 

Tạo tập tin cấu hình

Bạn cần tạo một webpack.config.js tập tin trong thư mục gốc của dự án. Tệp cấu hình này có vai trò trung tâm, vì đây là nơi bạn sẽ định nghĩa bốn khái niệm cốt lõi (điểm vào, đầu ra, bộ tải, plugin).

Các webpack.config.js tập tin giữ một đối tượng cấu hình trong đó các thuộc tính bạn cần chỉ định. Trong bài viết này, chúng tôi sẽ chỉ định bốn thuộc tính tương ứng với bốn khái niệm cốt lõi (nhập cảnh, đầu ra, mô-đun, và cắm vào), nhưng đối tượng config cũng có các thuộc tính khác.

1. Tạo (các) điểm vào

Bạn có thể có một hoặc nhiều điểm vào. Bạn cần xác định chúng trong nhập cảnh bất động sản.

Chèn đoạn mã sau vào webpack.config.js tập tin. Nó chỉ định một điểm vào:

 module.exports = mục: "./src/script.js"; 

Để chỉ định nhiều điểm nhập cảnh, bạn có thể sử dụng hoặc mảng hoặc cú pháp đối tượng.

Trong thư mục dự án của bạn, tạo một cái mới src thư mục và một script.js tập tin bên trong nó. Đây sẽ là của bạn điểm vào. Đối với mục đích thử nghiệm, chỉ cần đặt một chuỗi bên trong nó. Tôi đã sử dụng một trong những điều sau đây (tuy nhiên, bạn cũng có thể sử dụng một điều thú vị hơn):

 const hello = "Xin chào. Tôi là một dự án khởi động Webpack."; document.write (chào); 

2. Xác định đầu ra

Bạn có thể có chỉ có một tập tin đầu ra. Webpack gói tất cả các tài sản vào tập tin này. Bạn cần cấu hình đầu ra tài sản theo cách sau:

 const path = Yêu cầu ("đường dẫn"); module.exports = entry: "./src/script.js", đầu ra: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'); 

Các tên tệp tài sản định nghĩa Tên của tệp được đóng gói, trong khi con đường bất động sản chỉ định tên của thư mục. Ví dụ trên sẽ tạo ra /dist/bundle.js tập tin.

Mặc dù nó không bắt buộc, nhưng tốt hơn là sử dụng path.resolve () phương pháp khi bạn xác định con đường tài sản, vì nó đảm bảo độ phân giải mô-đun chính xác (đường dẫn tuyệt đối của đầu ra được tạo theo các quy tắc khác nhau trong các môi trường khác nhau, độ phân giải mô-đun giải quyết sự khác biệt này). Nếu bạn dùng path.resolve, bạn cần phải yêu cầu các con đường Mô-đun nút trên đỉnh của webpack.config.js tập tin.

3. Thêm bộ tải

Đến thêm bộ tải, bạn cần xác định mô-đun bất động sản. Dưới đây, chúng tôi thêm tải babel cho phép bạn sử dụng an toàn các tính năng ECMAScript 6 trong các tệp JS của bạn:

 const path = Yêu cầu ("đường dẫn"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), module: Rules: [test : /\.js$/, loại trừ: / (node_modules | bower_components) /, use: loader: "babel-loader", các tùy chọn: presets: ["env"]]; 

Cấu hình có vẻ khó khăn nhưng nó chỉ được sao chép từ Tài liệu của Babel loader. Hầu hết các trình tải đều đi kèm với tệp readme hoặc một số loại tài liệu, vì vậy bạn có thể (hầu như) luôn biết cách định cấu hình chúng đúng cách. Và, các tài liệu Webpack cũng có một trang giải thích cách cấu hình mô-đun.

Bạn có thể thêm nhiều bộ tải như bạn cần, đây là danh sách đầy đủ. Lưu ý rằng bạn cũng cần phải cài đặt mỗi bộ tải với npm để làm cho họ làm việc. Đối với trình tải Babel, bạn cần cài đặt các gói Node cần thiết với npm:

 cài đặt npm --save-dev babel-loader babel-core babel-preset-env webpack 

Nếu bạn có một cái nhìn của bạn pack.json tập tin, bạn sẽ thấy rằng npm thêm ba gói liên quan đến Babel vào sự phụ thuộc bất động sản, chúng sẽ đảm nhiệm việc biên dịch ES6.

4. Thêm plugin

Đến thêm các plugin, bạn cần xác định bổ sung bất động sản. Thêm vào đó, bạn cũng phải yêu cầu các plugin từng cái một, vì chúng là các mô-đun bên ngoài.

Trong ví dụ của chúng tôi, chúng tôi thêm hai plugin Webpack: Plugin Webpack HTML và Tải trước plugin Webpack. Webpack có một hệ sinh thái plugin đẹp, bạn có thể duyệt danh sách đầy đủ ở đây.

Để yêu cầu các plugin như các mô-đun Node, tạo hai hằng số mới: HtmlWebpackPlugin và Tải trước WebpackPlugin và sử dụng yêu cầu () chức năng.

 const path = Yêu cầu ("đường dẫn"); const HtmlWebpackPlugin = Yêu cầu ("html-webpack-plugin"); const PreloadWebpackPlugin = Yêu cầu ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), module: Rules: [test : /\.js$/, loại trừ: / (node_modules | bower_components) /, use: loader: "babel-loader", các tùy chọn: presets: ["env"]], plugin: [new HtmlWebpackPlugin (), PreloadWebpackPlugin ()]; 

Giống như trong trường hợp bộ tải, bạn cũng phải cài đặt các plugin Webpack với npm. Để cài đặt hai plugin trong ví dụ, hãy chạy hai lệnh sau trong dòng lệnh của bạn:

 npm cài đặt html-webpack-plugin --save-dev npm cài đặt --save-dev preload-webpack-plugin 

Nếu bạn kiểm tra pack.json nộp ngay bây giờ, bạn sẽ thấy rằng npm đã thêm hai plugin vào sự phụ thuộc bất động sản.

Chạy Webpack

Đến tạo cây phụ thuộc và xuất bó, chạy lệnh sau trong dòng lệnh:

 gói web 

Thường xuyên mất một hoặc hai phút cho Webpack để xây dựng dự án. Khi kết thúc, bạn sẽ thấy một thông báo tương tự trong CLI của mình:

Nếu mọi thứ đã đi đúng Webpack Tạo ra một xa thư mục trong thư mục gốc của dự án của bạn và đặt hai tập tin đi kèm (bundle.js và index.html) bên trong nó.

Github repo

Nếu bạn muốn xem, tải xuống hoặc fork toàn bộ dự án, hãy xem repo Github của chúng tôi.