webpack을 통해 타사 라이브러리를 도입하는 방법에 대한 간략한 분석-JS 튜토리얼-php.cn

webpack을 통해 타사 라이브러리를 도입하는 방법에 대한 간략한 분석

不言

풀어 주다： 2018-07-20 10:26:35

원래의

2597명이 탐색했습니다.

이 글에서는 웹팩을 통해 타사 라이브러리를 소개하는 방법에 대한 간략한 분석을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

일반적으로 타사 라이브러리를 도입하는 경우는 세 가지입니다.

CDN을 통한 도입
npm을 통해 설치 및 도입
서드 파티 js 파일이 로컬에 있음

CDN

이것이 가장 간단한 방법입니다. 예를 들어 Amap을 도입할 때 index.html 파일 하단에 다음 코드를 직접 넣으면 됩니다. webpack의 항목 파일이 아니기 때문에 이러한 상황은 webpack과 관련이 없습니다. here

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

로그인 후 복사

npm

npm install을 통해 설치된 패키지는 노드 모듈 폴더에 배치되며, 사용 시 import나 require 등 사용된 파일 상단에 직접 도입할 수 있습니다. 그러나 모든 모듈식 파일을 사용하려면 각 파일에 이 타사 파일을 도입해야 하는데 이는 매우 번거로운 일입니다. 이때 웹팩 플러그인인 ProvidePlugin을 사용할 수 있습니다. -in은 타사 라이브러리를 통합하는 것이며 그 범위는 전역입니다.
예를 들어 jquery

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

로그인 후 복사

를 도입하면 $와 jQuery를 모두 사용할 수 있습니다. 둘 다 jquery를 나타냅니다. $와 jQuery(jquery) 뒤의 값은 npm install jquery의 jquery와 일치해야 합니다. 그렇지 않으면 미만이 검색됩니다.

로컬 JS 라이브러리 파일

상황이 발생합니다. 타사 js 파일이 로컬인데 어떻게 webpack을 통해 도입할 수 있나요? 예를 들어 jquery의 두 번째 경우

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

로그인 후 복사

는 jquery가 노드 모듈에 없기 때문에 확실히 찾을 수 없습니다. 이 경우 webpack 구성의 해결 옵션을 사용하여 jquery에 대한 별칭을 지정할 수 있습니다. 경로를 구성합니다.
jquery.js 파일이 dist 폴더 아래에 있으면

resolve:{
    alias: {
      $: path.resolve(__dirname, './dist/jquery.js'),
      jQuery: path.resolve(__dirname, './dist/jquery.js'),
    }
}

로그인 후 복사

그렇습니다.

Through loader

ProvidPlugin 플러그인 외에도 타사 라이브러리 도입 작업을 완료할 수 있는 imports-loader도 있습니다.
테스트를 통해 타사 라이브러리를 도입해야 하는 파일을 지정하고 옵션을 통해 jquery를 구성합니다. 그러다가 패키징을 하고 나면 패키징된 app.js 파일이 더 커지는 것을 확인할 수 있습니다.

module: {
        rules: [
            {
                test: path.resolve(__dirname, "./src/app.js"),
                use: "imports-loader"
                options:{
                    $:'jquery'
                }
            }
        ]
    }

로그인 후 복사