webpack resolve.alias eslint import/no-unresolved : Front-end Build System

webpack resolve.alias eslint import/no-unresolved : Front-end Build System

웹팩 모듈러에서 import 경로를 간소화 하기 위해 resolve.alias 사용한다. 그런데 이걸 사용할 경우 eslint 에서 경고가 발생하는 데 이것을 해결하기 위한 방법이다.

$ npm install -D eslint-import-resolver-webpack

.eslintrc

{
    ... skip ...
    
  "settings": {
    "import/resolver": "webpack"
  }
  
}

webpack.config.js

resolve: {
    alias: {
      '_commons': path.resolve(__dirname, 'react/src/commons/'),
      '_addons': path.resolve(__dirname, 'react/src/addons/'),
      '_components': path.resolve(__dirname, 'react/src/components/'),
      '_modules': path.resolve(__dirname, 'react/src/modules/')
    }
},

source.js

import commons from '../../../commons';

alias 를 설정하면 아래처럼 할 수 있다.

import commons from '_commons';

keywords

webpack resolve alias eslint import/no-unresolved frotend buildsystem

Syaku Blog by Seok Kyun. Choi. 최석균.