이번에는 실제 프로젝트에서 Installation Plug-in을 사용하는 방법과 실제 프로젝트에서 Installation Plug-in을 사용할 때 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.
이 플러그인은 특히 파일 이름에 해시 값이 포함되어 있고 이 값이 컴파일될 때마다 변경되는 경우 웹팩 번들을 제공하는 HTML 파일 생성을 단순화하는 데 사용됩니다. 이 플러그인을 사용하여 HTML 파일을 자동으로 생성하거나, lodash 템플릿을 사용하여 생성된 번들을 로드하거나, 번들을 직접 로드할 수 있습니다.
실제 프로젝트에서 설치 플러그인을 사용하는 방법
npm을 사용하여 플러그인을 설치하세요
$ npm install html-webpack-plugin@2 --save-dev
로그인 후 복사
기본 사용법
이 플러그인은 body 요소에서 스크립트를 사용하여 모든 웹팩을 포함할 수 있습니다.
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}로그인 후 복사
이렇게 하면 dist 디렉터리에 index.html이라는 파일이 자동으로 생성되고 다음 내용이 포함됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
로그인 후 복사
webpack 진입점이 여러 개인 경우에는 다음 번들에 포함됩니다. 생성된 스크립트 요소
웹팩 출력에 CSS 리소스가 포함된 경우(예: ExtractTextPlugin을 사용하여 추출된 CSS) 링크를 사용하여 HTML 페이지의 헤드 요소에 포함됩니다.
Configuration
은 일련의 구성을 수행할 수 있으며 다음 구성 정보를 지원합니다.
title: 페이지의 제목 요소를 생성하는 데 사용됩니다.
filename: 출력 HTML 파일 이름, 기본값은 index입니다. .html, 하위 디렉터리로 직접 구성할 수도 있습니다.
템플릿 파일 경로, html!./index.html
inject: true | 'head' | 'body' | false , 모든 리소스를 특정 템플릿 또는 templateContent에 삽입 true 또는 body로 설정하면 모든 자바스크립트 리소스는 body 요소의 하단에 배치되고 'head'는 head 요소에 배치됩니다.
favicon: 출력 HTML 파일에 특정 파비콘 경로를 추가합니다.
minify: {} | false, html-minifier 옵션을 전달하여 출력 축소
hash: true | false, true인 경우 포함된 모든 스크립트 및 CSS 파일에 고유한 webpack 컴파일 해시를 추가합니다. 삭제에 유용합니다. 은닉처.
cache: true | false, true인 경우 이것이 기본값이며 파일은 수정된 후에만 게시됩니다.
showErrors: true | false, true이면 기본값이며 오류 메시지는 HTML 페이지에 기록됩니다
chunks: 특정 청크만 추가할 수 있습니다(예: 단위 테스트 청크만) )
chunksSortMode: 페이지에 추가되기 전에 청크가 정렬되는 방식을 제어할 수 있습니다. 지원되는 값: 'none' | 'default' | {function}-default:'auto'
excludeChunks: 건너뛰기 허용 특정 청크(예: 단위 테스트 블록 건너뛰기)
아래 예에서는 이러한 구성을 사용하는 방법을 보여줍니다.
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
hash: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}로그인 후 복사
여러 HTML 파일 생성
구성 파일에 이 플러그인을 여러 번 추가하여 여러 HTML 파일을 생성하세요.
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}로그인 후 복사
맞춤 템플릿 작성
기본으로 생성된 HTML 파일이 요구 사항에 맞지 않으면 나만의 맞춤 템플릿을 만들 수 있습니다. 편리한 방법은 주입 옵션을 전달한 다음 이를 사용자 정의 HTML 파일에 전달하는 것입니다. html-webpack-plugin은 필요한 모든 CSS, js, 매니페스트 및 파비콘 파일을 마크업에 자동으로 삽입합니다.
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'my-index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]로그인 후 복사
my-index.html 파일
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
로그인 후 복사
템플릿 로더가 있는 경우 이를 사용하여 이 템플릿을 구문 분석할 수 있습니다.
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs',
inject: 'body'
})
]로그인 후 복사
또한 패턴이 문자열인 경우 templateContent를 사용하여 전달할 수 있습니다.
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]로그인 후 복사
주입 기능이 요구 사항에 맞지 않고 리소스 배치를 완전히 제어하려는 경우. 기본 템플릿을 시작점으로 사용하여 lodash 구문을 직접 사용하여 자신만의 템플릿을 만들 수 있습니다.
templateContent 옵션은 jade:
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation) {
// Return your template content synchronously here
return '..';
}
})
]로그인 후 복사
또는 비동기 버전
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation, callback) {
// Return your template content asynchronously here
callback(null, '..');
}
})
]로그인 후 복사
과 같은 다른 언어를 사용하기 위한 함수일 수도 있습니다. template과 templateContent가 동시에 사용되면 플러그인에서 오류가 발생합니다. .
变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：
1、htmlWebpackPlugin: 这个插件的相关数据 ◦
htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。
"htmlWebpackPlugin": {
"files": {
"css": [ "main.css" ],
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
"main": {
"entry": "assets/main_bundle.js",
"css": []
},
}
}
}로그인 후 복사
如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源
htmlWebpackPlugin.options: 传递给插件的配置。
2、webpack: webpack 的 stats 对象。
3、webpackConfig: webpack 配置信息。
过滤块
可以使用 chunks 来限定特定的块。
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]로그인 후 복사
还可以使用 excludeChunks 来排除特定块。
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]로그인 후 복사
事件
通过事件允许其它插件来扩展 HTML。
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
使用方式：
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback();
});로그인 후 복사
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue-cli组件导入使用步骤详解
使用webpack做出ReactApp
위 내용은 실제 프로젝트에서 설치 플러그인을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
