Giới thiệu webpack

Bài đăng này đã không được cập nhật trong 7 năm

Giới thiệu về webpack

Webpack là một công cụ hỗ trợ xây dựng JavaScript module trong các ứng dụng của bạn. Webpack đơn giản hóa các workflow bằng việc xây dựng một cách nhanh chóng một đồ thị tham chiếu (dependency graph) trong ứng dụng của bạn và sắp xếp nó một cách chính xác.
Webpack có thể được cấu hình theo tùy chọn code của bạn và tách biệt thành cách vendor/js/css trên production. Chạy với server với mode development có thể xem có thể những thay đổi code của bạn của bạn một cách nhanh nhất và có rất nhiều đặc điểm thú vị.

Tại sao chúng ta nên sử dụng webpack?

Như đã nói ở trên, webpack có rất nhiều đặc điểm thú vị cho phép sử dụng để phù hợp với những cách khác nhau. Tham khảo thêm tại đây

Cài đặt

Chuẩn bị trước khi cài đặt

Trước khi cài đặt, bạn hãy chắc chắn rằng bạn đã cài một phiên bản nào đó của nodejs. Cài đặt bản LTS là một ý tưởng được khuyến khích, tuy nhiên , bạn có thể cài bất cứ bản nào, miễn là có nodejs.

Cài đặt trên local

Nếu bạn đang sử dụng npm, Npm sẽ cố gắng tìm kiếm cài đặt webpack trong mô đun cục bộ của bạn mà kỹ thuật cài đặt này hữu ích, và cách này rất là dễ sử dụng để cài đặt.
```
npm install webpack --save-dev

npm install webpack@<version> --save-dev
```
Hoặc bạn có thể tham khảo thêm việc cài đặt tai global hoặc nếu không sử dụng npm tai đây.

Tạo một bundle
- Tạo một thư mục demo để nếm thử webpack
```
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
```
Giờ, chúng ta sẽ tiếp tục tạo ra một thư mục con app và một file index.js

app/index.js
```
    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 một phần của code, chúng ta tạo 1 file HTML giống như sau:

index.html
```
    <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>
```
Trong ví dụ này, chúng ta dặt ẩn một dependencies giữa 2 tag <script> index.js phụ thuộc vào lodash bao gồm trong bên trước khi nó được chạy. Nó là đặt ẩn bở vì index.js chưa bao giờ cần khai báo lodash.. Nó giả sử rằng biến toàn bộ _ tồn tại. Ở đây có một số vấn đề về việc quản lý JavaScript project theo cách này:
- Nếu dependency bị missing, hoặc nó bị sai trong cách sắp sếp, thì ứng dụng sẽ không thực hiện chức năng trong mọi trường hợp.
- Nếu một dependency được sử bao trùm vào và không được sử dụng, thì ở đây sẽ có rất nhiều code không thực sự cần thiết mà trình duyệt (browser) vẫn phải tải về.
Để bundle lodash vào trong index.js, chúng ta đầu tiên cần cài đặt lodash
```
npm install --save lodash
```
sau đó import nó: app/index.js
```
+ import _ from 'lodash';

  function component () {
    ...
```
Chúng ta cũng phải thay đổi index.html để cho phép một bundled js file:
```
    <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>
  +   <script src="dist/bundle.js"></script>
    </body>
  </html>
```
ở đây, index.js thể hiện việc công khai nó cần lodash để hiển thị, tránh việc bị mù giống như _
- Bởi vì nói rõ những dependencites nào mà module cần, webpack nó có thể sử dụng những thông tin này để tạo ra 1 dependency graph. Sau đó nó sẽ sử dụng và generate là 1 optimized bundle nơi mà những script có thể thực hiện một cách đúng đắn. Đồng thời, những dependency không được sử dụng sẽ không bị ném vào bundle đó.
- Giờ thì khi run webpac trong folder với index.js giống như file đầu vào và bundle.js như file đầu ra, chúng ta sẽ có mọi code và mọi gói requires của gói.

    ./node_modules/.bin/webpack app/index.js dist/bundle.js

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

Sử dụng webpack như một config

Thay vì một configuration phức tạp, chúng ta có thể sử dụng một configuration file , nới mà webpack có thể sử dụng để tham chiếu đến với bundle code. Sau khi bạn tạo file webpack.config.js file, bạn có thể sử dụng CLI command để thực hiện các config setting. webpack.config.js

var path = require('path');

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

File này được sử dụng bởi webpack như sau:

./node_modules/.bin/webpack --config webpack.config.js

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

Sử dụng webpack với npm

Đơn giản trong package.json thêm vào:

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

Giới thiệu về webpack

Tại sao chúng ta nên sử dụng webpack?

Cài đặt

Chuẩn bị trước khi cài đặt

Cài đặt trên local

Tạo một bundle

Sử dụng webpack như một config

Sử dụng webpack với npm

Mục lục