Khi cấu hình Webpack phần alias sẽ gặp chút trục trặc nếu bạn có file cấu hình nằm trong 1 thư mục riêng.
Lỗi mô tả nếu bạn cấu hình alias nhưng không nhận:
Module not found: Can't resolve 'components'
Lỗi này xảy ra với lý do như sau:
Mình setup riêng 1 folder config/
cho webpack, chứa webpack config của cả dev và production environment. Các entry được thiết lập như sau:
output: path.resolve(__dirname, 'assets/')
...
resolve: {
alias: {
'lib': path.resolve(__dirname, 'src/js/lib/')
}
}
Tuy vậy, đọc kĩ sẽ thấy webpack __dirname
sẽ nhận diện theo vị trí file config webpack hiện tại, lúc này là config/webpack.js
, như vậy sẽ nhận sai path.
Để fix, bạn sẽ chuyển sang dùng process.cwd()
, là path tuyệt đối và đi từ folder chứa package.json.
Cách fix như sau:
output: path.resolve(process.cwd(), 'assets/')
...
resolve: {
alias: {
'lib': path.resolve(process.cwd(), 'src/js/lib/')
}
}
Và giờ bạn có thể vô tư gọi import trong code:
import { isMobile } from 'lib/utils'
export default el => {
if (isMobile.any()) {
console.log('Mobile device detected')
}
}
Have fun!