Xử lý alias không hoạt động trong cấu hình Webpack

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!