멀티 HTML 페이지 개발 프레임 워크 웹팩 기반 jQuery와 같은 세븐 타사 라이브러리

첫째, 문제를 해결

　　1, 방법 등 JQuery와, 같은 타사 라이브러리를 소개합니다

jQuery를 도입 둘째 방법

　　아래의 자산 / lib 디렉토리에 1, 다운로드 jquery.min.js

　　2, 설치 복사 웹팩 - 플러그인, 하나의 파일이나 빌드 디렉토리에 전체 기존 디렉토리. 명령 : 복사 웹팩을-플러그인 설치 NPM --save-dev에

　　webpack.config.js 구성 3로 구성된 포장 LIB 카탈로그 복사 디렉토리 회원은 다음 경우 :

1          // 타사 라이브러리없이 복사 패키지 
(2)          새로운 새 copyWebpackPlugin ([{
 3.              에서 : path.resolve (__ dirname이 "../src/assets/lib" ),
 (4).              에 './assets/lib' ,
 . 5              (가) 무시 [ ". *" ]
 . 6          }),

　　4 소개 jquery.min.js

　　　　페이지 HTML 하단에서 본체 단부 태그 내에 포함 <script의 SRC는 = "/ 자산 /는 LIB / jquery.min.js"> </ 스크립트> 파일 분사 제공된 구성 등록 htmlWebpackPlugin 패키지화 이후

　　　　body 요소의 바닥에 넣습니다.

　　　　다음 라벨을 무슨 일이 일어날 말에 몸이, 같은 다음 경우 :

　　　　왜,보기는로드 순서를 JS :

　　　　우리는하는 index.js에서 JQuery와 참조, 다음 JQuery와 아직 도입되지 않은, 자연 카자흐스탄 정의되지.

　　　　최종 효과 내부 본체 JQuery와 참조 태그에 투입 할 때와 다음이다 :

　　　　JQuery와 우선 순위는 우리가 jQuery를 사용하여 재미를 가질 수 있도록하는 것이이 문제를 나타나지 않습니다, 소개합니다.

　　5, 외부 부품 사용

　　　　외관 : 특정 방지 import 패키지를 (패키지) 번들로 포장하지만, 다시 이러한 외부 런타임 (런타임)에서 획득 의존 (외부 종속성을) 확장

　　　　webpack.config.js에서 할당을 증가

　　　　externals: {
  　　　　jquery: 'window.jQuery'
　　　　}
　　　 表示：当require的参数是jquery的时候，使用winow.jQuery这个全局变量引用它,这种最简洁的externals配置方式为默认的global模式，就是在window上挂一个全局变量，然后直接可以使用这个变量
　　 在js文件中引用

　　　　( "jQuery를") 또는 $ = CONST 필요한 "JQuery와"에서 수입 $ 이들 두 가지 방법이 수입을 cmd ES6 방법이 가능하며, 정상 기준으로 사용될 수있다

　　6주의

　　　　1,하지

externals里面进行配置，不在js文件中引入，jquery也可以正常使用，因为在index.html通过script引用了jquery，浏览器加载时已经把jquery挂载到了window

　　　　2, 윈도우에 연결된 사용자의 js 파일에 의해 참조되는 index.html을 스크립트 후 사용할 수 있습니다

　　 글로벌 commonjs는, commonjs2, AMD : 3, 외관이, 지원이 도입 부하에 모드 추가 패키지에 따라 결정된다 , 세부 사항 참조하시기 바랍니다 공식 문서를 : https://www.webpackjs.com/guides/author- 라이브러리 /

　　　　4, 타사 참조를 조정하기 위해 상호 의존적 인 문제, .html 파일을 도서관

　　원본 주소 : https://github.com/James-14/webpack4_multi_page_demo

　　불완전한 글이 ~ ~ ~ ~ 비판을하시기 바랍니다 !!!!!!

　　원본 기사, 소스를 표시하시기 바랍니다, 감사합니다!

멀티 HTML 페이지 개발 프레임 워크 웹팩 기반 jQuery와 같은 세븐 타사 라이브러리

추천