webpack 插件: html-webpack-plugin

插件地址:https://www.npmjs.com/package/html-webpack-plugin

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

Installation

使用 npm 安装这个插件

$ npm install [email protected]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,所有的 javascript 资源将被放置到 body 元素的底部,‘head‘ 将放置到 head 元素中。
  • favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
  • minify: {} | false , 传递 html-minifier 选项给 minify 输出
  • hash: true | false, 如果为 true, 将添加一个唯一的 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 ‘..‘;
    }
  })
]

或者异步版本

plugins: [
  new HtmlWebpackPlugin({
    templateContent: function(templateParams, compilation, callback) {
      // Return your template content asynchronously here
      callback(null, ‘..‘);
    }
  })
]

注意,如果同时使用 template 和 templateContent ,插件会抛出错误。

变量 o 在模板中是在渲染时传递进来的数据,这个变量有如下的属性:

  • 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: 传递给插件的配置。
  • webpack: webpack 的 stats 对象。
  • 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();
});
时间: 01-24

webpack 插件: html-webpack-plugin的相关文章

编写webpack 插件

Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要理解Webpack底层的东西.要有月底源代码的准备. Compiler 和 Compilation 开发插件最重要的两个资源就是 compiler 和 compilation 对象,理解他们的是扩展Webpack重要的一步 compiler对象包涵了Webpack环境所有的的配置信息,这个对象在We

webpack插件机制

webpack插件机制是整个webpack工具的核心,那么webpack插件有什么特点呢? 1.独立的JS模块,暴露相应的函数 2.函数原型上的apply方法会注入compiler对象(之所以要定义apply方法,是因为源码中是通过plugin.apply()调用插件的) 3.compiler对象上挂载了相应的webpack事件钩子 4.事件钩子的回调函数里能拿到编译后的compilation对象,如果是异步钩子还能拿到相应的callback 下面看个例子: function MyPlugin(

webpack 插件拾趣 (1) —— webpack-dev-server

结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉,兴许合适. 原本期望每篇文章里可以介绍若干个插件,但鉴于部分插件略为复杂,且单篇内容不想写的唇焦舌敝惹人倦烦,所以像本文要介绍的 webpack-dev-server 就独立一文了. 回归主题,今天你或许会花上30分钟的时间读完本章,并掌握 webpack-dev-server 的使用方法.理清一些

webpack插件之htmlWebpackPlugin

webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin 由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加载顺序,而只要在index.html内使用<script>标签引入bundle.js即可. 在index.html内使用引入bundle.js 开发阶段,index.html在根目录,script引入好像也没什么问题. index.html在根目录 但在真实发布项目时,发布的内容js文件都在dist

webpack插件之webpack-dev-server

webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server 现在只需要使用 npm run build指令就可以自动打包,并自动处理好各种依赖关系,但还是存在一个问题, 如果对js文件的代码进行了修改,又要重新打包才能测试,很明显又要手动操作 在开发测试过程中,我们会经常修改代码后,然后频繁刷新页面查看效果.对于我们前端仔来说,每次修改代码后都需要重新编译才能测试.这个过程非常繁琐,这简直是个深坑,不能忍啊.使用webpack-de

webpack系列--浅析webpack的原理

一.前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的.如果摒弃这些开发框架,开发效率会大幅下降. 在众多前端工程化工具中,webpack脱颖而出成为了当今最流行的前端构建工具. 二.webpack的原理 知其然知其所以然. 1.核心概念 (1)entry:一个可执行模块或者库的入口. (2)chunk:多个文件组成一个代码块.可以将可执行的模块和他所依赖的模块组合成一个c

webpack教程(二)——webpack.config.js文件

首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugin --save-dev 在项目app目录下建立component.js文件,写入如下代码 export default (text='hello world')=>{ const element=document.createElement('div'); element.innerHTML=te

玩转webpack 全方位掌握webpack核心技能和优化策略

第一章:wepack与构建发展简史 (9讲)01 | 课程介绍02 | 内容综述03 | 为什么需要构建工具04 | 前端构建演变之路05 | 为什么选择webpack06 | 初识webpack07 | 环境搭建:安装webpack08 | webpack初体验:一个最简单的例子09 | 通过npm script运行webpack 第二章:webpack基础用法 (12讲)10 | webpack核心概念之entry用法11 | webpack核心概念之output12 | webpack核心

Jenkins插件HTML Publisher Plugin的使用

前提: 下载插件HTML Publisher plugin 一.安装 安装好HTML Publisher plugin之后,会在新建或者编辑项目时,在[增加构建后操作步骤]出现[Publish HTML reports]的选项.如下: 二.配置 点击上面构建步骤后,在这里会出现配置项目: 点击[增加]进行配置,在配置之后,先看下每一项的说明,以下来自google翻译: 按照上面的说明,我的配置如下: 我只配置了HTML directory to archive的项,上面说了,这个路径是相对于工作

表单验证的validate.js插件---jQuery Validation Plugin

早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面,插件全名叫jquery.validate.js,在引入jquery.validate.js之前要先将jquery.js引入.这个插件主要用于表单的验证,用户在注册和登录时体验十分不错!由于自己只了解关于validate的皮毛,只会简单的应用rule规则和message自定义提示,事实上,validate还有其