Webpack 5: Babel plugin module resolver

Bài trước chúng ta đã biết cách tạo Alias trong webpack, bài hôm nay sẽ học thêm cách khác tạo Alias qua babel plugin module resolver

1. Alias là gì?

Alias là đường dẫn tuyệt đối thay thế cho đường dẫn tương đối khi import các module. Ví dụ như sau:

// thay vì
import Menu from '../../../src/components/Menu'

// thì dùng
import Menu from '~/src/components/Menu'

Cách bên dưới chính là sử dụng alias, cách này giúp chúng ta đỡ phải viết đường dẫn dài dòng, phải so sánh vị trí tương đối giữa file đang code với file muốn import. Nói chung người ta hay dùng alias để tạo đường dẫn root cho dự án.

2. Chuẩn bị file

Các file code ban đầu

const path = require('path')

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

3. Cài đặt

Link thư viện: https://www.npmjs.com/package/babel-plugin-module-resolver

npm install babel-plugin-module-resolver --save-dev

Tạo file .babelrc tại thư mục root của dự án

{
  "plugins": [
    ["module-resolver", {
      "alias": { "~": "./src" }
    }]
  ]
}

Tạo file jsconfig.json tại thư mục root của dự án để cấu hình gợi ý code trong VSCode

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.

Source code github: https://github.com/kentrung/webpack-tutorial

Series webpack: https://viblo.asia/s/webpack-tu-a-den-a-cung-kentrung-pmleB8Am5rd