您的位置：首页 > Web前端 > HTML

webpack 插件： html-webpack-plugin

2016-08-03 10:00 746 查看

转载自：

http://www.cnblogs.com/haogj/p/5160821.html

这个插件用来简化创建服务于 webpack bundle 的HTML文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模版加载生成的 bundles，或者自己加载这些 bundles

installation

使用npm安装这个插件

$ npm install html-webpack-plugin@2 --save-dev

Basic Usage

这个插件可以帮助生成HTML文件，在body元素中，使用 script 来包含你的所有 webpack bundles，只需要在你的 webpack 配置文件中如下配置：

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 入口点，它们都会被包含在生成的 script 元素中。

如果有任何的 css 资源包含在 webpack 输出中（例如，使用 ExtractTextPlugin 提炼出的css），这些将会使用 link 包含在 HTML 页面的 head 元素中。

configuration

可以进行一系列的配置，支持如下的配置信息：

title：用来生成页面的 title 元素

filename：输出的HTML文件名，默认是index.html，也可以直接配置带有子目录。

template：模版文件路径，支持加载器，比如 html!./index.html

inject： true | ‘head’ | ‘body’ | false ，注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的js资源将被放置到body元素的底部。

favicon：添加特定的 favicon 路径到输出的HTML 文件中。

minify： {} | false ，传递 html-minifier 选项给 minify 输出

hash： true | false，如果为ture，将添加一个唯一的webpack编译hash到所有包含的脚本和css文件，对于解除 cache 很有用。

cache： true | false，如果为true，这是默认值，仅仅在文件修改之后才会发布文件。

showErrors： true | false，如果为true，这是默认值，错误信息会写入到 HTML 页面中

chunks：允许只添加某些块（比如，仅仅unit test 块）

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文件不适合你的需要，可以创建自定义的模版。方便的方式是通过 inject 选项，然后传递给定制的HTML文件。html-webpack-plugin将会自动注入所有需要的 css，js，manifest和favicon文件到标记中

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
})
]

如果inject特性不适合你的需要，你希望完全控制资源放置。可以直接使用 lodash 语法，使用 default template 作为起点创建自己的模版。

templateContent 选项也可以是一个函数，以便使用其他语言，比如 jade：

plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation) {
// Return your template content synchronously here
return '..';
}
})
]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webpack

相关文章推荐

新的分享

章节导航