cdn을 사용하여 이와 같은 공개 js 파일을 참조하는 방법. 현재는 npm install로 설치되며 모두 로컬이며 내보내기가 제한되어 있습니다. cdn을 사용하여 가져올 수 있습니다. 하지만 현재는 모두 vue 프레임워크로 운영되고 있으며, html에서 직접 도입한 글쓰기 공간은 없습니다. 프로젝트에서 https://cdn.bootcss.com/eleme... 같은 공개 CDN을 사용하는 방법을 알려주세요.
타사 라이브러리에 CDN 주소가 있는 경우 템플릿의 HTML에서 HTML에 직접 도입할 수 있습니다. 그런 다음 코드를 자신의 CDN에 던져 균일하게 관리하고 다른 정적 파일과 동일한 방식으로 처리할 수도 있습니다. 예를 들어 img 파일은 cdnUrl+projectName/img/에 배치되며 이러한 세 번째- 파티 라이브러리도 그 위에 던져집니다. 현재 로컬에서 npm 패키지로 관리하고 있으니 인용할 때 import하면 분명 webpack으로 패키징되겠죠... webpack 문제와 관련이 있습니다. 먼저 현재 문제를 해결할 수 있는지 살펴보겠습니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악
Webpack은 이렇게 구성되어 있고, html에는 cdn의 jquery가 도입되었습니다
으아악html里中 从CDN에서 직접 import만 하면, import해서 같이 패키징/압축할 필요가 없습니다타사 라이브러리에 CDN 주소가 있는 경우 템플릿의 HTML에서 HTML에 직접 도입할 수 있습니다.
그런 다음 코드를 자신의 CDN에 던져 균일하게 관리하고 다른 정적 파일과 동일한 방식으로 처리할 수도 있습니다. 예를 들어 img 파일은 cdnUrl+projectName/img/에 배치되며 이러한 세 번째- 파티 라이브러리도 그 위에 던져집니다.
현재 로컬에서 npm 패키지로 관리하고 있으니 인용할 때 import하면 분명 webpack으로 패키징되겠죠... webpack 문제와 관련이 있습니다. 먼저 현재 문제를 해결할 수 있는지 살펴보겠습니다
웹팩 문서에 자세히 설명되어 있으니 jQuery를 예로 들어보세요.
https://doc.webpack-china.org...문제를 해결하려면 다음 단계가 필요합니다.
예:1. npm을 통해 로컬에 설치된 js 파일을 추출하고 가져오기를 통해 이 부분을 추출할 수 있습니다. webpack 코드 분리를 참조하세요.
으아악
2. HtmlWebpackPlugin을 사용하여 js 패키징 후 경로 및 파일 이름 문제를 해결하세요으아악 으아악 으아악
최종 생성된 효과는 다음과 같습니다으아악
문제는 주로 위의 공개 js 파일을 추출하는 데 있습니다. 추출 후 HtmlWebpackPlugin을 사용하여 리소스 경로를 자동으로 추가할지 수동으로 추가할지 여부는 개인 선택이므로 첫 번째 단계에 중점을 둡니다.