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ùng
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