Webpack từ A đến Á: Webpack import export module (ok)

https://kentrung256.blogspot.com/2020/08/webpack-import-export-module.html

Webpack từ A đến Á: Webpack import export module

August 01, 2020 webpackImport - Export Module là một trong những tính năng tuyệt vời của JavaScript, chúng đã được tiêu chuẩn hóa trong ES2015 (ES6) và được hỗ trợ trong hầu hết các trình duyệt tại thời điểm này, tuy nhiên có một số trình duyệt không nhận ra cú pháp mới. Nhưng đừng lo lắng, webpack sẽ hỗ trợ bạn. Đằng sau hậu trường, webpack thực sự "dịch mã" code để các trình duyệt cũ hơn cũng có thể chạy tốt. Bên cạnh import và export, webpack hỗ trợ tốt các cú pháp module khác nhau, xem phần Module API để biết thêm thông tin. Lưu ý rằng webpack sẽ không thay đổi bất kì đoạn code nào ngoài import và export. Nếu bạn muốn sử dụng các tính năng khác của ES6, hãy sử dụng bộ chuyển mã như Babel hoặc Bublé.

Nội dung chính

• 1. Chuẩn bị file

• 2. Import module trong javascript

1. Chuẩn bị file

Cấu hình file webpack.config.js như sau

const path = require('path')

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

Trong folder src tạo thêm file test.js

export function sum(x, y) {
  return x + y
}

2. Import module trong javascript

File index.js muốn sử dụng hàm sum của test.js thì ta chỉ việc import function sum vào là có thể sử dụng được.

import { sum } from './test'

const result = sum(1, 2)
console.log(`Tổng của 1 + 2 = ${result}`)

Chạy lại webpack và xem log có in ra kết quả như này là ok

Tổng của 1 + 2 = 3

Bài hôm nay chỉ ngắn vậy thôi, chủ yếu muốn nhắc các bạn rằng import - export là một trong những tính năng của (ES6) và không phải mọi trình duyệt đều hỗ trợ, đó là lí do ta sử dụng webpack để code của chúng ta có thể chạy tốt trên hầu hết các trình duyệt. Hẹn gặp lại các bạn ở bài viết tiếp theo!