> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/advanced/webpack-tu-a-den-a-webpack-import-export-module-ok.md).

# 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](https://kentrung256.blogspot.com/2020/08/webpack-import-export-module.html)  [webpack](https://kentrung256.blogspot.com/search/label/webpack?\&max-results=20)**Import - 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](https://webpack.js.org/api/module-methods/) để 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](https://babeljs.io/) hoặc [Bublé](https://buble.surge.sh/guide/).

**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!