webpack 插件： html-webpack-plugin

最新推荐文章于 2023-05-22 16:01:55 发布

许许盛

最新推荐文章于 2023-05-22 16:01:55 发布

阅读量2.2k

点赞数

分类专栏： webpack 文章标签： webpack

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转载自：
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 '..';
    }
  })
]

许许盛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack 插件： html-webpack-plugin

转载自： http://www.cnblogs.com/haogj/p/5160821.html这个插件用来简化创建服务于 webpack bundle 的HTML文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模版加载生成的 bundles，或者自己加载这些 bundlesi
复制链接

扫一扫