웹팩 플러그인ProvidePlugin 사용 방법 및 eslint 설정

2047 단어
ProvidePlugin: 모듈을 자동으로 로드하므로 여기저기importrequire에 설치할 필요가 없습니다.(클릭하여 공식 문서 보기)
사용 방법:
웹팩을 설정합니다.config.js 파일에서plugins 속성
new webpack.ProvidePlugin({
  identifier: 'module-name',
  // ...etc
});

사용 예:
new webpack.ProvidePlugin({
  '_': 'lodash'
});

설정이 끝나면 코드에서 바로 사용할 수 있습니다, 더 이상 import 필요 없음
참고: (eslint을 구성하지 않으면 브라우저에서 오류 메시지가 표시됩니다. '' is not defined no-undef)
패키지를 구성합니다.json에서 eslintConfig 속성 (또는.eslintrc.js 파일에서 전역 변수 글로벌스 설정)
"eslintConfig": {
  "globals": {
    "_": true,
    // ...etc.
    //   package.json      
  }
}

 
ES2015 모듈의 default export에 대해 모듈의 default 속성을 지정해야 합니다.
new webpack.ProvidePlugin({
  identifier: ['module-name', 'property'],
  // ...etc.
});

예:
new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
});

좋은 웹페이지 즐겨찾기