html-webpack-plugin在html中插入数据
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8"/>

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

  </body>

</html>

查看文档，有如下介绍：
可以使用lodash语法在模板中注入数据。
下面的变量在模板中可以使用：

  • htmlWebpackPlugin.options: 通过new htmlWebpackPlugin(options)传递.
  • webpack: 通过compilation.getStats().toJson()得到的一个对象.
  • webpackConfig对象: 比如 webpackConfig.output.publicPath获取webpack.prod.conf.js中的publicPath
  • compilation对象.
  • htmlWebpackPlugin.files: 格式如下
"htmlWebpackPlugin": {

  "files": {

    "css": [ "main.css" ],

    "js": [ "https://www.baidu.com/static/js/app.cfebce17280ae88b6b7b.js"],

    "chunks": {}

  }

}

如何实现的呢？
主要在emit阶段，通过如下方法实现(/node_modules/html-webpack-plugin/index.js)：

HtmlWebpackPlugin.prototype.executeTemplate

= function (templateFunction, chunks, assets, compilation) {

  var self = this;

  return Promise.resolve()

    // Template processing

    .then(function () {

      var templateParams = {

        compilation: compilation,

        webpack: compilation.getStats().toJson(),

        webpackConfig: compilation.options,

        htmlWebpackPlugin: {

          files: assets,

          options: self.options

        }

      };

      var html = '';

      try {

        html = templateFunction(templateParams);// 注入到模板方法中

      } catch (e) {...}

      return html;

    });

};

html-webpack-plugin在html中插入数据的更多相关文章

  1. 使用C#向ACCESS中插入数据

    使用C#向ACCESS中插入数据   1.创建并打开一个OleDbConnection对象 string strConn = " Provider = Microsoft.Jet.OLEDB ...

  2. 触发器修改后保存之前的数据 表中插入数据时ID自动增长

    create or replace trigger t before update on test5 for each rowbegin insert into test55 values (:old ...

  3. Hive通过查询语句向表中插入数据注意事项

    最近在学习使用Hive(版本0.13.1)的过程中,发现了一些坑,它们或许是Hive提倡的比关系数据库更加自由的体现(同时引来一些问题),或许是一些bug.总而言之,这些都需要使用Hive的开发人员额 ...

  4. 向Oracle数据库中插入数据出错：ORA-01036 无效的变量名或数据

    向Oracle数据库中插入数据出错: 经过排查,因为Update数据时没有出错,所以OracleHelper没有问题: 看异常信息提示:无效的变量和数据,应该是SQL语句的问题,调试时所传的实例Use ...

  5. 解决getJdbcTemplate往oracle数据库中插入数据返回主键出错问题

    我们使用Spring中的JdbcDaoSupport往Mysql中插入数据并返回主键代码,我们使用的mysql数据库,主键在数据库中设置为自增长:该类继承自JdbcDaoSupport,所以能直接使用 ...

  6. Java程序在向mysql中插入数据的时候出现乱码

    今天在往数据库中插入数据的时候中文字符在数据库中就出现了乱码?网上有各种说法,但是适合我的,最终解决我的问题的只有下面一种! 在创建数据库的时候,注意设置编码方式. CREATE DATABASE ` ...

  7. 错误 0xc0202049: 数据流任务 1: 无法在只读列“ID”中插入数据

    数据库导入导出时总失败,错误信息如下: 正在验证 (错误) 消息错误 0xc0202049: 数据流任务 1: 无法在只读列“ID”中插入数据. (SQL Server 导入和导出向导) 错误 0xc ...

  8. mysql数据库中插入数据INSERT INTO SET的优势

    往mysql数据库中插入数据.以前常用 INSERT INTO 表名 (列名1,列名2…) VALUES(列值1,列值2); 如果在PHP程序中,就会写成如下示例(往商品库里增加商品) $sql = ...

  9. EF Core中，通过实体类向SQL Server数据库表中插入数据后，实体对象是如何得到数据库表中的默认值的

    我们使用EF Core的实体类向SQL Server数据库表中插入数据后,如果数据库表中有自增列或默认值列,那么EF Core的实体对象也会返回插入到数据库表中的默认值. 下面我们通过例子来展示,EF ...

随机推荐

  1. Java多线程之内存模型

    目录 多线程需要解决的问题 线程之间的通信 线程之间的通信 Java内存模型 内存间的交互操作 指令屏障 happens-before规则 指令重排序 从源程序到字节指令的重排序 as-if-seri ...

  2. 并发编程,python的进程,与线程

    并发编程 操作系统发展史 基于单核研究 多道技术 1.空间上的复用 多个程序公用一套计算机硬件 2.时间上的复用 切换+保存状态 例子:洗衣 烧水 做饭 切换 1.程序遇到IO操作系统会立刻剥夺走CP ...

  3. python0.1

    python基础 python是一种高级编程语言,而编程语言分为3种 编程语言 编程语言是一种人与计算机沟通的工具. 编程就是就将人的需求通过攥写编程语言命令计算机完成指令. 编程的意义在于将人类的生 ...

  4. HTML&CSS面试高频考点(二)

    HTML&CSS面试高频考点(一)    ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + bord ...

  5. 如何用Tesseract做日文OCR（c#实现）

    首先做一下背景介绍,Tesseract是一个开源的OCR组件,主要针对的是打印体的文字识别,对手写的文字识别能力较差,支持多国语言(中文.英文.日文.韩文等).是开源世界里最强的一款OCR组件.当然和 ...

  6. PID各环节的意义和功能，自带PID的matlab编程实例

    这是PID的标准形式包括比例/积分/微分三部分,e为偏差 下面我们分析三个环节的作用,设:当前系统状态A,目标状态B, e=B-A,初始状态e>0 (以下是个人的理解,欢迎读者评论) 1 比例环 ...

  7. python编码--解码

    在py3中只有两种数据类型:str  bytes str:  存unicode(万国码)编码--全球通用的 bytes:存的是16进制的 1.str s='ehllo 丽庆'  --->它存在内 ...

  8. 猿灯塔：关于Java面试，你应该准备这些知识点

    自天子以至于庶人,壹是皆以修身为本 <礼记·大学> 马老师说过,员工的离职原因很多,只有两点最真实: 钱,没给到位 心,受委屈了 当然,我是想换个平台,换个方向,想清楚为什么要跳槽,如果真 ...

  9. JavaScript动画实例：递归分形图动态展示

    在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...

  10. html鼠标自定义右键菜单：css+js实现自定义html右键菜单

    我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...