webpack 플러그인 사용에 대한 자세한 설명 html-webpack-plugin 예제
- php中世界最好的语言원래의
- 2018-05-25 15:22:571836검색
이번에는 webpack 플러그인 html-webpack-plugin 사용에 대한 자세한 설명을 가져오겠습니다. webpack 플러그인 html-webpack-plugin 사용 시 주의사항은 무엇인가요? 보세요.
이 플러그인은 특히 파일 이름에 해시 값이 포함되어 있고 이 값이 컴파일될 때마다 변경되는 경우 웹팩 번들을 제공하는 HTML 파일 생성을 단순화하는 데 사용됩니다. 이 플러그인을 사용하여 HTML 파일을 자동으로 생성하거나, lodash 템플릿을 사용하여 생성된 번들을 로드하거나, 번들을 직접 로드할 수 있습니다.
설치
npm을 사용하여 이 플러그인을 설치하세요
$ npm install html-webpack-plugin@2 --save-dev
기본 사용법
이 플러그인은 HTML 파일을 생성하는 데 도움이 되며, body 요소에서 스크립트를 사용하여 웹팩에 모든 웹팩 번들을 포함할 수 있습니다. 구성 file다음 구성:
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>
웹팩 진입점이 여러 개인 경우 모두 빌드 스크립트 요소에 포함됩니다.
웹팩 출력에 CSS 리소스가 포함된 경우(예: ExtractTextPlugin을 사용하여 추출된 CSS) 링크를 사용하여 HTML 페이지의 헤드 요소에 포함됩니다.
Configuration
은 일련의 구성을 수행할 수 있으며 다음 구성 정보를 지원합니다.
title: 페이지의 제목 요소를 생성하는 데 사용됩니다.
filename: 출력 HTML 파일 이름, 기본값은 index입니다. .html, 하위 디렉터리로 직접 구성할 수도 있습니다.
템플릿 파일 경로, html!./index.html
inject: true | 'head' | 'body' | false , 모든 리소스를 특정 템플릿 또는 templateContent에 삽입 true 또는 body로 설정하면 모든 javascript 리소스가 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'
})
]
또한 패턴이 string인 경우 templateContent를 사용하여 전달할 수 있습니다.
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]
如果 inject 特性不适合你的需要，你希望完全控制资源放置。 可以直接使用 lodash 语法，使用 default template 作为起点创建自己的模板。
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中文网其它相关文章！
推荐阅读：
위 내용은 webpack 플러그인 사용에 대한 자세한 설명 html-webpack-plugin 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!