? 패키징해야 하며 html 파일을 패키징해야 합니다. 가져온 js 파일의 경로가 바뀌었습니다.
html을 패키징하기 위해 webpack을 사용하면 다음과 같은 이점이 있습니다.
(1) 패키징된 js 파일은 자동으로 html에 도입될 수 있습니다.
(2) html이 패키징된 후에도 여전히 빌드 폴더에 생성되어 패키징된 js 파일과 함께 저장됩니다.
(3)
webpack에서
1. 플러그인을
기본적으로
설치합니다.JS 및 JSON 파일만 이해할 수 있으며 다른 파일 패키징을 지원해야 합니다. 모든 유형의 파일에는 해당 플러그인 또는 로더를 설치해야 합니다.
HTML 파일을 패키징해야 하는 경우 먼저 html-webpack-plugin 플러그인을 설치해야 합니다.
npm install html-webpack-plugin -D
이 플러그인의 역할:
기본적으로 내보내기 아래에 html 파일을 생성합니다. 그런 다음 모든 JS/CSS 리소스를 가져올 수도 있습니다.
html 파일을 직접 지정하고 이 html 파일에 리소스를 추가할 수도 있습니다.
2.
html-webpack-plugin 플러그인을 설치한 후 다음을 수행해야 합니다
webpack.config.js 파일에서 구성하십시오:
// ...
// 1. 플러그인 소개 const HtmlWebpackPlugin = require('html-webpack-plugin');
모듈.수출 = {
// ...
// 2. 플러그인에서 플러그인 플러그인을 구성합니다. [
새로운 HtmlWebpackPlugin({
template: 'index.html', // 항목 템플릿 파일을 지정합니다(프로젝트 루트 디렉터리 기준).
filename: 'index.html', // 출력 파일 이름과 위치를 지정합니다(출력 디렉터리 기준).
// 기타 플러그인 구성 항목은 해당 플러그인 공식 문서를 참고하세요})
]
} 세부 구성 링크: https://www.npmjs.com/package/html-webpack-plugin
입력 템플릿 파일의 경로와 파일명이 구성과 일치하는지 확인하신 후 컴파일하시면 됩니다.
3. 여러 JS 항목과 여러 HTML 상황을 구성하는 경우
여러 HTML 파일을 컴파일해야 하며 파일은 서로 다른 JS 파일을 가져와야 합니다. 그러나 기본적으로 chunk 된 HTML 파일은 모든 패키지된 JS 파일을 가져올 수 있습니다. JS를 배포하도록 지정되었습니다.
const path = require('경로');
// 1. 플러그인 소개 const HtmlWebpackPlugin = require('html-webpack-plugin');
모듈.수출 = {
// ...
// 2. JS 항목 구성(여러 항목)
항목: {
공급업체: ['./src/jquery.min.js', './src/js/common.js'],
색인: './src/index.js',
카트: './src/js/cart.js'
},
//내보내기 출력 구성: {
파일 이름: '[이름].js',
경로: path.resolve(__dirname, 'build/js')
},
// 3. 플러그인 구성: [
새로운 HtmlWebpackPugin({
템플릿: 'index.html',
파일 이름: 'index.html',
// 청크를 사용하여 청크를 가져올 JS 파일을 지정합니다: ['index', 'vendor']
}),
// 컴파일해야 하는 HTML 수, 필요한 새 플러그인 수 new HtmlWebpackPlugin({
템플릿: './src/cart.html',
파일 이름: 'cart.html',
덩어리: ['장바구니', '판매자']
})
]
} 팁: 여기서 주목해야 할 것은 컴파일해야 하는 HTML 파일 수, 새로운
HtmlWebpackPlugin몇 번이나 생성해야 하는지입니다.
위 구성이 성공적으로 컴파일되면 출력은 다음과 같습니다
.
|__ index.html #index.js 및 Vendor.js 소개
|__ cart.html #cart.js 및 Vendor.js 소개
|__ js
|__ Vendor.js # jquery.min.js 및 common.js에 의해 생성됨 |__ index.js # index.js에 의해 생성됨 |__ cart.js # 1, webpack. config.js 구성
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
플러그인: [
// html-webpack-plugin html 패키징 구성 이 플러그인은 새로운 HTMLWebpackPlugin({
template: "./index.html", // 템플릿에 패키징된 상대 또는 절대 경로(패키징 대상)
title: 'Home', // 생성된 HTML 문서에 사용되는 제목 hash: true, //true는 포함된 모든 스크립트 및 CSS 파일에 고유한 webpack 컴파일 해시를 추가합니다. 주로 캐시를 지우는 데 사용되며,
minify: { // HTML을 압축합니다.
CollapseWhitespace: true, // 공백 축소 keepClosingSlash: true, // 닫힌 간격 유지 RemoveComments: true, // 주석 제거 RemoveRedundantAttributes: true, // 중복 속성 제거 RemoveScriptTypeAttributes: true, // 스크립트 스크립트 유형 속성 제거 RemoveStyleLinkTypeAttributes: true, // 스타일 링크 유형 속성 삭제 useShortDoctype: true, // 짧은 문서 유형 사용 PreserveLineBreaks: true, // 줄바꿈 유지 minifyCSS: true, // 텍스트 내 CSS 압축
minifyJS: true, // 텍스트 내 js를 압축합니다.
}
}),
],
... 2. 현재 index.html
<!DOCTYPE html>
<html 랭="">
<머리>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>웹팩데모</title>
</head>
<본문>
<div id="앱">
HTML 패키징 구성</div>
</body>
</html> 3. 이때 index.js
import './../css/index.less'
함수 추가(x,y) {
x+y 반환
}
console.log(add(2,3)); 3. 콘솔 웹팩에 패키지를 입력하고 패키지 출력 파일에 추가 index.html이 있는지 확인합니다. 내용은 다음과 같습니다.
<!DOCTYPE html>
<html 랭="">
<머리>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>웹팩데모</title>
<script defer src="index.js"></script></head>
<본문>
<div id="앱">
HTML 패키징 구성</div>
</body>
</html> <script defer="" src="index.js"></script> 는 자동으로
브라우저에 도입되어 패키지된 출력 index.html을 열며 스타일이 효과가 있고 컨트롤이 있음을 알 수 있습니다. 장치도 정상적으로 출력됩니다.
