Webpack dành cho người bắt đầu

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Share vì hữu ích

Webpack là công cụ ngày càng được cộng đồng sử dụng Javascript ưa chuộng. 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 các 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 có thể trở thành người bạn đồng hành trong suốt quá trình dev của bạn, bởi vì 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ị 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ủa Webpack có nhiều điểm giống với những gì Webpack làm. Điểm khác biệt ở đây là nhiều đối thủ sinh ra để làm “task runners”, đại khái là thực hiện các công việc lặp đi lặp lại, trong khi Webpack có xuất phát là “module bundler”, tức kẻ đóng gói các món hàng và trao tay.

Ta sẽ cùng tìm hiểu quá trình làm việ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 cài đặt 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:

Giao diện webpack cli

Cách khác là ta cài đặt trong 1 project nào đó. Ta sẽ thực hiện 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 cấu hình 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 có thể thực hiện đượ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 định mục tiêu file nào, chẳng hạn với CSS:

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

Thêm nữa, ta 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 <style>

Loader SASS sang CSS

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

Tạo SourceMap

Source Map giúp bạn tracking chính xác những phần nào cần sửa trong source.

module.exports = {
  /*...*/
  devtool: 'inline-source-map',
  /*...*/
}

Bạn đang phân vân không rõ có những loại loader nào có thể sử dụng? Tra cứu danh sách loader tại đây.

Sử dụng Babel Loader

Ta hãy cùng tìm hiểu thêm 1 loại loader nữa, ở đây là biên dịch Babel để chuyển từ ES6 về ngược lại ES5 khi compile.

module.exports = {
  /*...*/
  module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
  /*...*/
}

Hoặc bạn muốn nó xử lý riêng cho các file React/JSX thôi:

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ]
  }
  /*...*/
}

Vậy đã là rất thú vị rồi phải không?

Các plugin của Webpack

Plugin cũng giống như Loader webpack ta vừa cấu hình ở trên, nhưng nó làm được nhiều hơn và nó là một phần quan trọng của Webpack.

Hãy lấy ví dụ:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin(
      sourceMap: true,
      output: {
        comments: false,
        beautify: false
      }
    )
  ]
}

Với plugin này bạn sẽ nén file Javascript đầu ra với nhiều tuỳ chọn khác nhau.

Chế độ (mode) trong Webpack

Việc thiết lập kịch bản môi trường nhằm tăng thời gian deploy và giảm thời lượng chờ không cần thiết. Chế độ này được Webpack giới thiệu trong phiên bản 4. Nó bao gồm:

  • development
  • production

Khi cấu hình, bạn sẽ nhập thêm param mode như ví dụ sau:

module.exports = {
  mode: 'development'
}

Chế độ development thực hiện một số ưu tiên riêng:

  • Build nhanh
  • Ít tối ưu hoá code, nén code hơn.
  • Không xoá bỏ các comment trong code.
  • Cung cấp thêm thông tin lỗi và gợi ý.
  • Cung cấp thêm khả năng debug tốt hơn.

Ngược với development, chế độ production chậm hơn, tuy nhiên lại tối ưu tốt hơn kết quả đầu ra. Kết quả là file Javascript đầu ra có kích thước nén nhỏ hơn.

Thiết lập các kịch bản Webpack

Bạn xác định các kịch bản trong file package.json để nó có thể thực thi.

Chạy Webpack

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

Lệnh: npm run build

Xem thay đổi và cập nhật

"scripts": {
  "watch": "webpack --watch"
}

Lệnh: npm run watch

Kết luận

Webpack giống như một đời ô tô siêu sang với nhiều thứ khá thú vị giúp bạn cảm nhận chuyến đi tốt hơn. Tuy vậy, nó đòi hỏi bạn phải đọc, vọc và tìm cách integrate với project của mình. Trong bài viết sau, Code Tốt sẽ hướng dẫn các bạn làm quen với integrate với một project cụ thể nhé.

Bài viết được lược dịch và biên tập lại từ freeCodeCamp.

Các thông tin bạn có thể tham khảo thêm:

Share vì hữu ích

Điện thoại Apple mua tại FptShop

About Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

View all posts by Khôi 'Pro' Nguyễn →

Trả lời