webpack에서 지정된 JS 파일을 별도로 패키징하는 방법
이제 webpack을 사용하여 지정된 JS 파일을 별도로 패키징하는 방법을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
Background
최근 요청을 받았습니다. 인쇄된 프런트엔드 패키지에서 액세스한 백엔드 IP가 확실하지 않기 때문에 수정을 용이하게 하기 위해 프로젝트의 IP 구성 파일을 별도로 꺼내야 합니다. 운영 및 유지 관리 배포 중 IP. 따라서 지정된 파일을 별도로 패키징하려면 webpack을 사용해야 합니다.
CommonsChunkPlugin
module.exports = {
entry: {
app: APP_FILE // 入口文件
},
output: {
publicPath: './dist/', //输出目录，index.html寻找资源的地址
path: BUILD_PATH, // 打包目录
filename: '[name].[chunkhash].js', // 输出文件名
chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
}
}Digression
{
여기서 주의할 점이 있습니다. 즉, 경로가 ./dist 상대 경로로 작성된다는 것입니다. /dist/와 같은 절대 경로를 작성하는 경우 한 가지 단점은 nginx가 프런트 엔드 패키지를 루트 디렉터리에 배치하지 않으면 index.html이 리소스에 액세스하지 못한다는 것입니다. 따라서 상대경로를 작성하는 것을 권장하지만, 상대경로를 사용할 경우 프로젝트 자체의 라우팅 접근이 해시를 사용하지 않고 HTML5 모드로 되어 있는 경우(위에 # 기호가 있는 경우) 잠재적인 문제가 발생할 수 있습니다. 라우팅), 프로젝트는 여전히 배포에 실패합니다. Angular와 React에는 이러한 문제가 있을 것입니다. 저는 Vue를 사용해 본 적이 없으므로 비슷할 것입니다. 이때 해결 방법은 index.html의 헤드에 기본 태그를 추가하는 것입니다. 즉,
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <base href="/" rel="external nofollow" > </head>
}
webpack 자체는 모듈성을 기반으로 하므로 대부분의 경우 항목 파일 하나만 가져오면 됩니다. 다 됐어. 이를 위해서는 앱 외에 항목 파일을 추가해야 합니다. 즉,
entry: {
app: APP_FILE // 入口文件
ip: IP_FILE
},이런 방식으로 webpack을 구성하면 dist 파일은 app.xxx.js 및 ip.xxx.js를 성공적으로 인쇄하지만 패키지된 프로젝트에서는 여전히 오류를 보고합니다. 해결 방법은 IP 항목 파일을 유지하는 것입니다. 변경되지 않고 commonChunk로 처리됩니다. 즉, ip.xxx.js가 먼저 로드되고 오류가 발생하지 않도록 플러그인에
new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),를 추가하세요.
단점: 이 패키징에는 분명한 단점이 있습니다. 즉, 패키징된 파일이 압축되어 있어 파일을 두 번 수정하는 것이 불편하다는 것입니다. (압축에 대한 솔루션을 찾을 수 없습니다.)
CopyWebpackPlugin
최종 솔루션은 ip.js 파일을 프로젝트의 모듈성에서 분리한 다음 index.html에서 별도로 참조하는 것입니다. (처음에 생각했던 해결 방법이었는데, 제가 원했던 해결 방법은 아니었고, 아쉽게도 제 지식이 부족해서 이전 문제를 해결하지 못했습니다.)
해결 과정:
먼저 webpack에 CopyWebpackPlugin을 도입하세요. 구성 코드:
new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])index.html에 스크립트 태그를 별도로 도입하세요. 임의의 접미사를 구성하는 데 주의하세요. 즉:
<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>ip.js 방지 캐싱으로 인해 문제가 발생하기 때문입니다.
위에서는 js를 별도로 지정하는 webpack 패키징 문제를 해결합니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
FastClick 소스 코드 자세히 설명(자세한 튜토리얼)
vue 및 element-ui를 사용하여 테이블 콘텐츠 페이징을 구현하는 방법
vue를 사용하여 타임스탬프를 사용자 정의 시간 형식으로 변환하는 방법
위 내용은 webpack에서 지정된 JS 파일을 별도로 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7505
15
1378
52
78
11
52
19
19
55
VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드
Jun 15, 2023 pm 06:17 PM
Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치
VITE와 웹팩의 차이점은 무엇입니까
Jan 11, 2023 pm 02:55 PM
차이점: 1. 웹팩 서버의 시작 속도는 Vite의 시작 속도보다 느립니다. Vite는 시작할 때 패키징할 필요가 없고 모듈 종속성을 분석하고 컴파일할 필요가 없으므로 시작 속도가 매우 빠릅니다. 2. Vite 핫 업데이트는 Vite의 HRM 측면에서 webpack보다 빠릅니다. 특정 모듈의 내용이 변경되면 브라우저가 모듈을 다시 요청하게 됩니다. 3. Vite는 esbuild를 사용하여 종속성을 사전 구축하는 반면 webpack은 노드를 기반으로 합니다. 4. Vite의 생태계는 웹팩만큼 좋지 않으며, 로더와 플러그인도 충분히 풍부하지 않습니다.
모듈식 개발에 PHP와 웹팩을 사용하는 방법
May 11, 2023 pm 03:52 PM
웹 개발 기술이 지속적으로 발전하면서 프론트엔드와 백엔드 분리, 모듈화 개발이 보편화된 추세가 되었습니다. PHP는 일반적으로 사용되는 백엔드 언어입니다. 모듈식 개발을 수행할 때 모듈을 관리하고 패키징하려면 몇 가지 도구를 사용해야 합니다. Webpack은 사용하기 매우 쉬운 모듈식 패키징 도구입니다. 이 글에서는 모듈 개발을 위해 PHP와 웹팩을 사용하는 방법을 소개합니다. 1. 모듈형 개발이란 무엇입니까? 모듈형 개발은 프로그램을 서로 다른 독립적인 모듈로 분해하는 것을 의미합니다.
webpack은 es6을 es5 모듈로 어떻게 변환합니까?
Oct 18, 2022 pm 03:48 PM
구성 방법: 1. 가져오기 방법을 사용하여 ES6 코드를 패키지된 js 코드 파일에 넣습니다. 2. npm 도구를 사용하여 babel-loader 도구를 설치합니다. 구문은 "npm install -D babel-loader @babel/core"입니다. @babel/preset-env"; 3. babel 도구의 구성 파일 ".babelrc"를 생성하고 트랜스코딩 규칙을 설정합니다. 4. webpack.config.js 파일에서 패키징 규칙을 구성합니다.
Spring Boot 및 Webpack을 사용하여 프런트엔드 프로젝트 및 플러그인 시스템 구축
Jun 22, 2023 am 09:13 AM
최신 웹 애플리케이션의 복잡성이 계속 증가함에 따라 우수한 프런트엔드 엔지니어링 및 플러그인 시스템을 구축하는 것이 점점 더 중요해지고 있습니다. Spring Boot와 Webpack의 인기로 인해 프런트엔드 프로젝트와 플러그인 시스템을 구축하기 위한 완벽한 조합이 되었습니다. SpringBoot는 최소한의 구성 요구 사항으로 Java 애플리케이션을 생성하는 Java 프레임워크입니다. 개발자가 웹 애플리케이션을 더 빠르고 쉽게 구축하고 배포할 수 있도록 자동 구성과 같은 많은 유용한 기능을 제공합니다. 여
웹팩이란 무엇입니까? 작동 원리에 대한 자세한 설명?
Oct 13, 2022 pm 07:36 PM
Webpack은 모듈 패키징 도구입니다. 다양한 종속성을 위한 모듈을 생성하고 이를 모두 관리 가능한 출력 파일로 패키징합니다. 이는 단일 페이지 애플리케이션(현재 웹 애플리케이션의 사실상 표준)에 특히 유용합니다.
webpack 패키지를 볼 수 있는 파일은 무엇입니까?
Dec 20, 2022 pm 07:44 PM
vue에서 webpack은 js, css, picture, json 및 기타 파일을 브라우저 사용에 적합한 형식으로 패키징할 수 있으며, webpack에서는 js, css, picture, json 및 기타 파일 형식을 모듈로 사용할 수 있습니다. webpack에 포함된 다양한 모듈 리소스를 하나 이상의 패키지로 패키징하여 병합할 수 있으며 패키징 과정에서 이미지 압축, scss를 css로 변환, ES6 구문을 ES5로 변환 등의 리소스 처리가 가능합니다. html 파일 형식으로 인식됩니다.
Vue에 웹팩을 설치하는 방법
Jul 25, 2022 pm 03:27 PM
vue의 Webpack은 노드 패키지 관리자 "npm" 또는 npm 이미지 "cnpm"을 사용하여 설치됩니다. Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. 사용 시 node.js 구성 요소 지원이 필요합니다. 구문은 "npm install webpack -"입니다. g" 또는 "cnpm install webpack -g".
