Webpack từ A đến Á: 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ì dùngimport

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ì dùngimport Menu from'../../../src/components/Menu'// thì dùngimport 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

Nguồn: viblo.asia

Bài viết liên quan

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con