webpack을 통해 타사 라이브러리를 도입하는 방법에 대한 간략한 분석
- 不言원래의
- 2018-07-20 10:26:352637검색
이 글에서는 웹팩을 통해 타사 라이브러리를 소개하는 방법에 대한 간략한 분석을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
일반적으로 타사 라이브러리를 도입하는 경우는 세 가지입니다.
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'
}
}
]
}
관련 추천:
config/index.js에 대한 자세한 설명: vue의 구성
위 내용은 webpack을 통해 타사 라이브러리를 도입하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!