06/09/2017

Cấu hình Webpack dùng chung folder dependencies giữa LoopBack và Vue.js

Mình code app full stack javascript là sử dụng Node.js ở backend và Vue.js ở frontend, hoàn toàn là javascript. Một vấn đề lớn của mình là làm thế nào có thể dùng webpack build source code frontend nhưng ở root directory. Mình tổ chức dữ liệu như sau:

Trên hình cấu trúc app mình dùng Loopback CLI để khởi tạo. Sau đó mình xóa đi folder client và dùng Vue CLI để tạo app frontend ở folder client

Sau đó, ở root folder và client folder đều có file package.json. Mình thử command để build frontend bundle như sau:

Mình sẽ thấy 1 folder /client/dist để lưu static và bundle của Vue. Vậy mình có thể run command này ở root folder không? Rõ ràng là sẽ KHÔNG bởi vì file config webpack trong Vue template chứa relative path nên khi gọi từ root folder thì path của các require bên trong config sẽ không đúng.

Vậy mình khắc phục như thế nào?


Như vậy, mình sẽ không cần add bundle của frontend trong source code mà sẽ nhờ heroku build trực tiếp khi deploy.

Đây là repo mình đã test thử và chạy thành công giữa LoopBack và Vue https://github.com/toanalien/loopback-vue-webpack các bạn tham khảo. 





Không có nhận xét nào:

Đăng nhận xét