Hướng dẫn Webpack cơ bản

Bài viết được sự cho phép của tác giả Kien Dang Chung

Cùng với sự phát triển của các Framework Javascript và CSS, các website ngày càng sử dụng nhiều hơn mã Javascript, CSS giúp nâng cao trải nghiệm người dùng. Với các Framework Javascript mạnh mẽ như Vue.js, React, Angular… việc xây dựng website có tính tương tác cao, tải nhanh chóng, sử dụng mô hình ứng dụng đơn trang trở lên đơn giản. Cũng chính vì lẽ đó, số lượng các thư viện, các module sử dụng trong ứng dụng trở lên không kiểm soát nổi khi hệ thống website phình ra. Khi đó, mã nguồn cần được thiết kế sao cho quản lý được tốt là một vấn đề. Có rất nhiều các hệ thống quản lý module nổi tiếng như Browserify, RequireJS… tuy nhiên Webpack làm tốt hơn cả với nhiều tính năng nổi trội. Khi tìm hiểu Laravel 5.4, có phần Laravel Mix là công cụ để tập hợp và biên dịch mã javascript và css chúng ta thấy rằng Laravel Mix dựa trên Webpack để bundle (đóng gói các thư viện khác nhau lại) các module.

Bắt đầu với Webpack

Mục tiêu của Webpack

Về ý tưởng Webpack là một công cụ đóng gói các module và các thư viện phụ thuộc thành các file tĩnh, mục tiêu Webpack muốn đạt được là:

• Chia nhỏ toàn bộ tài nguyên các thư viện và các tài nguyên phụ thuộc thành các “chunk” và chỉ tải các thành phần nhỏ này khi cần thiết.
• Giúp quá trình tải các tài nguyên nhanh.
• Mọi file tĩnh sau quá trình đóng gói sẽ ở dạng module.
• Cho phép tích hợp các thư viên bên thứ ba ở dạng module.
• Cho phép cá nhân hóa mọi thành phần của công cụ đóng gói module.
• Thích hợp cho cả những dự án cực lớn.

Cài đặt Webpack

Webpack có thể cài đặt thông qua các công cụ quản lý thư viện lập trình Javascript như npm hoặc yarn, chúng ta cần cài đặt gói webpack toàn cục để có thể dùng được với CLI (Command Line Interface).

npm install webpack -g
yarn global add webpack

Sau khi cài đặt xong chúng ta có thể kiểm tra xem webpack được cài đặt ok chưa bằng câu lệnh webpack -v:

c:xampphtdocs>yarn global add webpack
yarn global v0.23.4
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning fsevents@1.1.1: The platform "win32" is incompatible with this module.
info "fsevents@1.1.1" is an optional dependency and failed compatibility check.
Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "webpack@2.5.0" with binaries:
      - webpack
warning No license field
Done in 5.42s.

c:xampphtdocs>webpack -v
2.5.0

Ok, như vậy chúng ta đã cài đặt xong Webpack. Tiếp theo chúng ta cùng nhau bắt đầu một ví dụ trước khi đi vào tìm hiểu các khái niệm trong Webpack.

Ví dụ đầu tiên sử dụng Webpack

Trong ví dụ đầu tiên về Webpack chúng ta sẽ tạo ra một thư mục webpack-demo bằng câu lệnh:

C:>mkdir webpack-demo && cd webpack-demo

C:webpack-demo>

Tiếp đó, thực hiện tạo ra file package.json mẫu bằng lệnh npm init –yes hoặc npm init -y.

C:webpack-demo>npm init -y
Wrote to C:webpack-demopackage.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Bước tiếp theo, chúng ta thực hiện cài đặt webpack cục bộ thông qua npm và chèn một entry vào devDependencies với câu lệnh:

C:webpack-demo>npm install --save-dev webpack
[    ..............] | fetchMetadata: sill mapToRegistry uri https://registry.n
...

Mở package.json ra trong thuộc tính devDependencies chúng ta đã thấy có webpack:

  "devDependencies": {
    "webpack": "^2.5.1"
  }

Với cách cài đặt cục bộ này, webpack không thể sử dụng trong các CLI (Xem thêm cách cài đặt cục bộ và cài đặt toàn cục gói phần mềm thông qua Npm). Tiếp theo, tạo một thư mục app trong thư mục webpack_demo với một file index.js nằm trong đó. Nội dung file index.js như sau:

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

Để chạy đoạn code này, chúng ta tiếp tục tạo ra file index.html nằm trong thư mục gốc dự án là thư mục webpack_demo với nội dung:

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

Ok, khi chạy index.html chúng ta thấy dòng chữ Hello webpack, để ý rằng trong index.js đã sử dụng gói lodash với hàm join để gắn kết hai từ Hello và webpack. Do đó, trong file HTML chúng ta cần chèn mã nguồn gói lodash vào. Các file HTML và Javascript này hết sức bình thường với cách làm thông thường trước đây, tuy nhiên chúng ta thấy trong file HTML có tới hai thẻ <script> để chèn vào mã nguồn hai file Javascript, tiếp theo chúng ta sẽ sử dụng Webpack để bundle (đóng gói) chúng lại thành một file duy nhất. Để đóng gói, đầu tiên chúng ta cần cài đặt cục bộ gói lodash và tạo một entry vào dependencies trong package.json với câu lệnh npm install –save lodash

C:webpack-demo>npm install --save lodash
webpack-demo@1.0.0 C:webpack-demo
+-- lodash@4.17.4
`-- webpack@2.5.1
  `-- async@2.4.0
    `-- lodash@4.17.4  deduped

Khi đó file package.json chúng ta thấy đã có entry lodash nằm trong dependencies:

  "devDependencies": {
    "webpack": "^2.5.1"
  },
  "dependencies": {
    "lodash": "^4.17.4"
  }

Sau đó, chúng ta điều chỉnh nội dung file app/index.js:

import _ from 'lodash';

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

Thêm dòng import _ from ‘lodash’; để tải lodash và sử dụng. Trong file HTML index.html thay vì hai thẻ <script> chúng ta thay bằng một thẻ và trỏ đến file bundle.js là file Webpack đóng gói từ hai nguồn index.js và gói lodash được cài đặt ở trên.

<html>
   <head>
     <title>webpack 2 demo</title>
   </head>
   <body>
     <script src="dist/bundle.js"></script>
   </body>
</html>

Tiếp theo chúng ta sẽ thực hiện lệnh webpack <source_file> <bundle_file> để đóng gói:

C:webpack-demonode_modules.bin>webpack ../../app/index.js ../../dist/bundle.js
Hash: 3d99a4d7ef6cf1bc5cc1
Version: webpack 2.5.1
Time: 929ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ../lodash/lodash.js 540 kB {0} [built]
   [1] C:/webpack-demo/app/index.js 278 bytes {0} [built]
   [2] ../webpack/buildin/global.js 509 bytes {0} [built]
   [3] ../webpack/buildin/module.js 517 bytes {0} [built]

Ở đây, chúng ta sử dụng gói webpack được cài đặt cục bộ trong dự án webpack_demo để thực hiện đóng gói tài nguyên. Mở file dist/bundle.js chúng ta thấy sẽ có mã nguồn gói lodash, mã wrapper của webpack và mã nguồn file index.js đã được chuyển dạng. Thực hiện chạy file index.html chúng ta thấy kết quả vẫn như cũ nhưng việc chèn file Javasript chỉ còn lại một file dist/bundle.js. Thử tưởng tượng nếu dự án của bạn sử dụng hàng trăm các gói phần mềm Javascript khác nhau, chưa kể các file Javascript do bạn tự phát triển, khi đó webpack sẽ đóng gói tất cả chúng vào một file duy nhất và bạn chỉ cần insert file này vào file HTML là chạy được. File bundle.js ở trên ở dạng đọc được, tuy nhiên khi triển khai lên máy chủ web, chúng ta cần “minify” chúng đi nhằm giảm dung lượng file bundle.js giúp SEO tốt hơn. Để thực hiện minify các file đầu ra chỉ cần thêm cờ -p (ngắn gọn của –optimize-minimize) trong khi thực hiện lệnh webpack.

C:webpack-demonode_modules.bin>webpack ../../app/index.js ../../dist/bundle.js -p
Hash: 3d99a4d7ef6cf1bc5cc1
Version: webpack 2.5.1
Time: 3629ms
    Asset     Size  Chunks             Chunk Names
bundle.js  72.5 kB       0  [emitted]  main
   [0] ../lodash/lodash.js 540 kB {0} [built]
   [1] C:/webpack-demo/app/index.js 278 bytes {0} [built]
   [2] ../webpack/buildin/global.js 509 bytes {0} [built]
   [3] ../webpack/buildin/module.js 517 bytes {0} [built]

OK, giờ mở file bundle.js bạn sẽ thấy code trong file này đã được minify.

Các khái niệm cơ bản trong Webpack

Ví dụ trên đây giúp bạn hiểu webpack dùng để làm gì một cách dễ dàng. File bundle.js được tạo ra thông qua việc sử dụng các câu lệnh, tuy nhiên khi việc đóng gói trở lên phức tạp với nhiều đầu vào và các thiết lập chúng ta cần định nghĩa file cấu hình cho Webpack. Chúng ta tạo ra một file webpack.config.js nằm trong thư mục gốc của dự án webpack_demo với nội dung:

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Khi đó bạn chỉ cần thực hiện lệnh webpack là cho ra kết quả tương tự mà không cần đưa các tham số vào cho lệnh webpack.

Watch mode – đóng gói ngay khi thay đổi

Để ý là trong quá trình viết code, mỗi lần khi thực hiện thay đổi code các file Javascript, CSS chúng ta lại phải chạy lại lệnh webpack để thực hiện đóng gói, như vậy quả là phiền phức trong quá trình phát triển ứng dụng khi mà việc thay đổi code xảy ra thường xuyên. Watch mode sẽ giải quyết vấn đề này, khi bạn thực hiện lệnh webpack với cờ -w (ngắn gọn của –watch) thì mỗi khi code thay đổi webpack sẽ tự động đóng gói mà chúng ta không cần làm gì khác. Chú ý, bạn không được tắt màn hình console bởi watch mode sẽ chạy liên tục để kiểm tra xem mã nguồn của bạn có thay đổi không thông qua các mã băm.

C:webpack-demo>webpack -w

Webpack is watching the files.

Hash: 3d99a4d7ef6cf1bc5cc1
Version: webpack 2.5.1
Time: 890ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./app/index.js 278 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]

Ok, tiếp theo bạn thử thay đổi file index.js thêm dòng alert(‘Webpack watch mode’); vào cuối file index.js như sau:

import _ from 'lodash';

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());
alert('Webpack Watch mode');

Ngay lập tức, trên màn hình console bạn sẽ thấy Webpack phản ứng ngay:

Hash: 28853a2b79cc9f32ae37
Version: webpack 2.5.1
Time: 116ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [1] ./app/index.js 308 bytes {0} [built]
    + 3 hidden modules

Bạn mở thử file index.html thì thấy kết quả là đoạn code vừa thêm vào đã có tác dụng ngay. Chúng ta cũng có thể cấu hình watch mode trong file webpack.config.js với thuộc tính watch như sau:

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  <strong>watch: true</strong>
};

Tiếp theo chúng ta cùng tìm hiểu các khái niệm cơ bản khác của Webpack như Entry, Ouput, Loader, Plugin

Entry

Trong file webpack.config.js chúng ta thấy có thuộc tính entry, đây chính là điểm bắt đầu khi ứng dụng chạy và cũng chính là điểm bắt đầu để Webpack đọc và phân tích các gói thư viện liên quan, các file liên quan cho việc đóng gói.

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Output

Khi webpack đóng gói tất cả các module liên quan, bạn cần thiết lập cho webpack nơi file kết quả được tạo ra sau khi đóng gói. Webpack sử dụng thuộc tính output trong đối tượng cấu hình:

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Trong ví dụ trên, chúng ta sử dụng các thuộc tính output.filename và output.path để nói cho webpack là tên file đầu ra và đường dẫn nơi đặt file đầu ra này.

Loader

Loader cho phép bạn tiền xử lý một file khi bạn sử dụng câu lệnh require() để tải nó, các loader chuyển đổi file từ các ngôn ngữ khác nhau như TypeScript, CoffeeScript… sang Javascript, nó thậm chí cho phép bạn require() file CSS trong Javascript. Webpack xử lý các file (.css, .html, .scss, .jpg…) như những module, tuy nhiên webpack chỉ hiểu Javascript do đó nó cần các loader. Hiện nay, đã có rất nhiều các thư viện mã nguồn Javascript được viết ở chuẩn ES6 (ECMAScript 2015), tuy nhiên các trình duyệt vẫn chưa hỗ trợ cho tiêu chuẩn này, do đó khi sử dụng các đoạn mã ES6 sẽ không thể chạy được trên trình duyệt, tuy nhiên với loader babel nó sẽ giúp tiền xử lý ES6 thành ES5 và từ đó Webpack có thể tiếp tục công việc của mình. Để sử dụng các gói phần mềm loader này chúng ta cần cài đặt thông qua npm hoặc yarn:

npm install --save-dev babel-loader babel-core babel-preset-es2015

Chú ý, do babel-loader phụ thuộc gói babel-core và chúng ta cũng muốn chuyển đổi mã nguồn từ ES2015 hay ES6 về dạng ES5 để trình duyệt có thể xử lý được nên chúng ta cần cấu hình cho babel-loader sử dụng preset do đó gói babel-preset-es2015 là cần thiết. Do đó chúng ta cần cài đặt cả ba gói phần mềm trên để cấu hình cho loader.

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'y
  },
  module: { 
    loaders: [ { 
      test: /.js$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
        presets: ['es2015'] 
      } 
    } ], 
  }
};

module.exports = config;

Plugin

Loader chỉ được sử dụng để thực hiện các chuyển dạng cho các file cần xử lý, plugin thì khác, nó thực hiện các hành động hoặc các chức năng của người dùng trên các compilation hoặc chunk. Để sử dụng các plugin, bạn cần sử dụng require() và sau đó đưa chúng vào mảng plugins của đối tượng cấu hình.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Lời kết

Webpack là một công cụ module bundler xuất sắc, đặc biệt khi bạn require cả mã HTML và CSS trong Javascript, Webpack thực hiện nó rất tốt, nó hữu dụng trong những tình huống như bạn muốn tải file CSS trong mã Javascript. Chúng tôi sẽ còn quay lại với công cụ Webpack trong các bài viết tiếp theo.

Bài viết gốc được đăng tải tại allaravel.com

Có thể bạn quan tâm:

• Làm thế nào để trở thành một Frontend Developer
• Bí kíp học skill lập trình mới cho dev
• Webpack là gì? Hướng dẫn webpack 4: tất cả những gì bạn cần biết từ 0 đến khi ra sản phẩm

Xem thêm Việc làm Developer hấp dẫn trên TopDev