Webpack resolve로 매우 간단한 가져오기

Modules은 도트 없이 ES6과 함께 제공되는 최고의 개선 사항 중 하나였습니다. Webpack과 결합하면 보다 개발자 친화적인 방식으로 코드를 작성할 수 있습니다. 그러나 가져올 때 파일 참조는 때때로 반복적이고 오류가 발생하기 쉬우며 보기 어려울 수 있습니다. 운 좋게도 Webpack은 구성하기 매우 쉬운 올바른 솔루션을 제공합니다.

웹팩 해결

Resolve은 가져온 모듈을 찾는 데 도움이 되는 Webpack 라이브러리입니다. 구성하려면 구성 파일에 아래 코드 스니펫을 추가하십시오.

웹팩.config.js

module.exports = {
  resolve: {
    // configuration options
  },
};

Resolve 라이브러리를 사용하면 modules 또는 alias 두 가지 방법으로 가져오기를 해결할 수 있습니다.

모듈

모듈은 지정된 디렉토리에서 검색하여 가져오기를 해결합니다. 종종 이것은 노드 모듈을 해결하는 데 사용됩니다.

웹팩.config.js

resolve: {
  modules: ['node_modules']
}

이 구성을 통해 다음을 대체할 수 있습니다.

import Module from '../../../../node_modules/module';

이것으로:

import Module from 'module';

resolve.modules 를 사용하면 다른 구성 파일에 문제를 일으키지 않으므로 가져오기가 작동하도록 하기 위해 이 작업만 수행하면 됩니다.

별명

Alias는 원래 경로를 사용자 지정 경로로 교체하여 가져오기를 해결합니다.

웹팩.config.js

resolve: {
  alias: {
    @components: path.resolve(__dirname, 'components/'),
    @partials: path.resolve(__dirname, 'partials/'),
  },
}

이를 통해 다음을 변경할 수 있습니다.

import Component from '../../../../components/component';
import Part from '../../../../partislas/part';

이에:

import Component from '@components/component';
import Part from '@partials/part';

__dirname는 webpack.config.js 파일의 위치를 ​​가리킵니다.

ESLint 조정

별칭을 사용하면 경로를 확인할 수 없다는 ESLint 오류가 발생할 수 있습니다. 이 문제를 해결하려면 eslint-import-resolver-webpack 을 사용할 수 있습니다.

구성하려면 다음 코드 줄을 .eslintrc.yml 파일에 추가할 수 있습니다.

settings:
  import/resolver: webpack

이 설정은 webpack.config.js 파일이 eslintrc.yml 파일과 동일한 디렉토리에 있는 경우 작동합니다. 그렇지 않으면 다른 설정 옵션을 참조하십시오.

요약

Webpack 구성은 사용 가능한 모든 옵션으로 압도적일 수 있지만 운 좋게도 이 라이브러리는 이해하고 구성하기가 매우 간단합니다. 그것은 내가 더 깨끗한 수입품을 작성하는 데 도움이 되었고, 당신도 그것이 나만큼 유용하다는 것을 알게 될 것이라고 확신합니다.