[WEBPACK] Config alias chuẩn trong webpack
https://kipalog.com/posts/Config-alias-chuan-trong-webpack
Previous[WEBPACK] Webpack từ A đến Á: Webpack resolve alias - extensionsNext[WEBPACK] Webpack từ A đến Á: Webpack Babel Loader
Last updated
https://kipalog.com/posts/Config-alias-chuan-trong-webpack
Last updated
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:
Cách bên dưới chính là sử dụng alias.
Thông thường để config alias trong một project frontend sử dụng webpack. Theo doc chỉ cần config như sau: webpack.config.js
Webpack hiểu
Eslint không báo lỗi
VSCode gợi ý được
Webpack hiểu
Ta thực hiện như trên webpack.config.js
Eslint không báo lỗi
Ta add thêm thư viện sau đây
Add đoạn code sau đây .eslintrc.js
VSCode gợi ý được
Để VSCode hiểu và gợi ý được thì ta add thêm file jsConfig.json ở đầu project như sau.
Bạn nhớ để dấu * sau @components nhé.
Trên đây là cách mình config alias vào project sử dụng webpack của mình. Việc config như vậy sẽ giúp tìm các thành phần dễ hơn, code cũng đẹp hơn và chuyên nghiệp hơn.
Làm như vậy ta mới giải quyết một vấn đề là cho webpack hiểu được "@components" là gì. Còn 2 vấn đề nữa ta mắc phải đó là: Eslint không hiểu và báo lỗi. Texteditor cụ thể là mình đang sử dụng là VSCode không gợi ý. Vậy config chuẩn alias phải thỏa mãn 3 yếu tố:
