Webpack dành cho người bắt đầu – Code Tốt

Điểm bài viết

[Tổng cộng: 2 Trung bình: 5]

Webpack là công cụ ngày càng được hội đồng sử dụng Javascript ưu thích. Bạn đã biết cách làm chủ Webpack và sử dụng nó cho project của mình chưa ?

Webpack là gì?

Webpack là công cụ giúp bạn compile những module Javascript. Nó hay được gọi là “ module bundler ” .
Thay vì nhiều file, nó tạo ra một hoặc vài file để chạy ứng dụng của bạn .
Webpack hoàn toàn có thể trở thành người bạn sát cánh trong suốt quy trình dev của bạn, do tại nó hoàn toàn có thể :

• Đóng gói các file của bạn.
• Theo dõi (Watch) các thay đổi và chạy lại các task (như gulp).
• Có thể chạy biên dịch Babel ES6 sang ES5, nên bạn có thể vô tư viết ES6 mà không lo trình duyệt chưa hỗ trợ đầy đủ.
• Có thể biên dịch CoffeeScript sang Javascript.
• Có thể chuyển ảnh inline sang data URI.
• Cho phép bạn gọi require() trong file CSS.
• Có thể chạy máy chủ dùng cho development.
• Có thể hỗ trợ chế độ hot module replacement.
• Có thể tách nhỏ file output thành nhiều file nhỏ để giảm kích thước khi tải trang.
• … và còn rất nhiều thứ thú vị khác nữa.

Webpack không bị số lượng giới hạn bởi frontend, mà cùng dùng làm backend Node. js trong lập trình .
Có nhiều đối thủ cạnh tranh của Webpack có nhiều điểm giống với những gì Webpack làm. Điểm độc lạ ở đây là nhiều đối thủ cạnh tranh sinh ra để làm “ task runners ”, đại khái là triển khai những việc làm lặp đi lặp lại, trong khi Webpack có xuất phát là “ module bundler ”, tức kẻ đóng gói những món hàng và trao tay .
Ta sẽ cùng khám phá quy trình thao tác của Webpack ngay sau đây .

Cài đặt Webpack

Webpack có sẵn bằng cách cài đặt global -g hoặc cho từng project.

Nếu bạn setup global để sử dụng bất kể đâu, gõ lệnh :

npm i -g webpack webpack-cli

Một khi hoàn tất, bạn có thể sử dụng dòng lệnh webpack-cli:

Cách khác là ta thiết lập trong 1 project nào đó. Ta sẽ triển khai câu lệnh sau :

npm i webpack webpack-cli --save-dev

Một khi hoàn tất, bạn thêm các dòng sau vào trong package.json:

{ 
  "scripts": {
    "build": "webpack" 
  }
}

Khi đó, bạn có thể dùng npm run build được nhé.

Tất nhiên, cài mới chỉ là cài, chưa xong, ta sẽ còn thông số kỹ thuật Webpack để làm theo thứ mình muốn nữa .

Cấu hình Webpack

Nếu bạn lười, hay tốt nhất ta hiểu là Webpack ( từ phiên bản 4 ) mặc định hoàn toàn có thể thực thi được ngay việc sau :

• Entry point (điểm bắt đầu của source) nằm trong ./src/index.js
• Kết quả compile sẽ nằm ở ./dist/main.js

Tuy nhiên, chúng ta tạo file webpack.config.js để thiết lập chi tiết hơn.

Cấu hình Entry Point (Đầu vào)

Trong webpack.config.js, bạn có thể thay đổi path entry point như dưới đây. Mặc định nếu bạn không nhập thì được hiểu là ./src/index.js như đã nói ở trên.

module.exports = {
  /*...*/
  entry: './src/js/main.js'
  /*...*/
}

Cấu hình output (đầu ra)

Trong webpack.config.js, bạn cũng có thể thay đổi đầu ra. Mặc định khi không nhập thì sẽ là ./dist/main.js. Ta có thể đổi thành path khác, ví dụ:

module.exports = {
  /*...*/
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'vendor.js'
  }
  /*...*/
}

Sử dụng CSS Loader

Sử dụng Webpack cho phép bạn thực hiện import hoặc require trong các dòng code Javascript của mình. Hơn nưa, bạn có thể dùng trong cả CSS, ví dụ trong file main.css:

import 'base/typography.css';
import 'base/buttons.css';

Điều kiện để làm được là bạn phải sử dụng RegExp để xác lập tiềm năng file nào, ví dụ điển hình với CSS :

module.exports = {
  /*...*/
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
  }]
  }
  /*...*/
}

Thêm nữa, ta hoàn toàn có thể có thêm lựa chọn cho riêng loader vừa gọi như sau :

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
/*...*/
}

Bạn cũng có thể gọi nhiều loader khác nhau, ví dụ:

module.exports = {
  /*...*/
  module: {
  rules: [
    {
      test: /\.css$/,
      use:
        [
          'style-loader',
          'css-loader',
        ]
    }
    ]
  }
  /*...*/
}

Trong ví dụ ở trên :

css-loader làm nhiệm vụ import file typography.css + buttons.css vàp trong 1 file CSS duy nhất.

style-loader làm nhiệm vụ gán style vào trong DOM, sử dụng tag