(一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin。

   在工程文件夹安装插件 命令如下:

npm install html-webpack-plugin --save-dev

(二)

   新建 webpack.config.js,名称可以更改,更改后 运行时,需指定 配置文件名称。

  例如,配置文件名为 my.webpack.config.js, 则需要在package.json 文件中,在scripts 处添加如下代码:

"scripts": {
"webpack": "webpack --config webapack.config.js --progress --display--modules --colors --dispaly-reason"
}

  编译时,需使用 npm run webpack 命令。

(三)

  webpack是支持 AMD、CMD、ES6模块化编程的,因此,我们是可以使用 require、exports 来获取、返回模块内容的。

  在webpack.config.js,添加如下代码

  我们将原始文件放在 /src/js 文件夹,打包复制后的文件放在 /dist/js 文件夹。

var htmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
/* entry:'./src/scripts/main.js',*/
entry:{
main:'./src/scripts/main.js',  //文件来源路径
a:'./src/scripts/a.js'
},
output:{
path:'./dist',
filename:'js/[name]-[hash].js', //生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
publicPath:'http://cdn.com' //publicPath 用于发布时,生成的羽毛
},
plugins:[
new htmlWebpackPlugin({
filename:'index.html', //通过模板生成的文件名
template:'index.html',//模板路径
inject:false, //是否自动在模板文件添加 自动生成的js文件链接
title:'这个是WebPack Demo',
minify:{
removeComments:true //是否压缩时 去除注释
}
})
]
};

   我们可以在模板 index.html 书写类似 PHP、ASP.net 的语法格式。

 模板index.html文件模板内容

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title><%=htmlWebpackPlugin.options.title%></title>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry%>"></script>
</head>
<body>
<div>
:<=JSON.stringify(htmlWebpackPlugin.files[key])>
<input type="text">
<% for(var key in htmlWebpackPlugin.options){%>
<%=key %>:<%=JSON.stringify(htmlWebpackPlugin.options[key])%>
<%}%> <% for(var key in htmlWebpackPlugin.files){%>
<%=key %>:<%=JSON.stringify(htmlWebpackPlugin.files[key])%>
<%}%>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry%>"></script>
</div>
</body>
</html>

  运行 webpack,即可生成HTML 文件 。

 

webpack(二) 根据模板生成简单的html文件的更多相关文章

  1. php根据word模板生成新的word文件

    原文地址:http://www.niu12.com/article/16 php使用phpword将word内容变量替换 a.安装phpword composer require phpoffice/ ...

  2. php命令行按模板生成应用的入口文件

    接着这篇文章php命令行生成项目结构 继续改造: ghostwu@dev:~/php/php1/12$ tree . ├── app │   └── index.php ├── core │   ├─ ...

  3. 【Python图像特征的音乐序列生成】使用Python生成简单的MIDI文件

    这个全新的Python音乐创作系列,将会不定期更新.写作这个系列的初衷,是为了做一个项目<基于图像特征的音乐序列生成模型>,实时地提取照片特征,进行神经网络处理,生成一段音乐. 千里之行, ...

  4. 使用T4模板生成MySql数据库实体类

    注:本文系作者原创,但可随意转载. 现在呆的公司使用的数据库几乎都是MySQL.编程方式DatabaseFirst.即先写数据库设计,表设计按照规范好的文档写进EXCEL里,然后用公司的宏,生成建表脚 ...

  5. CSharpGL(12)用T4模板生成CSSL及其renderer代码

    CSharpGL(12)用T4模板生成CSSL及其renderer代码 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立 ...

  6. Java生成和操作Excel文件(转载)

    Java生成和操作Excel文件   JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该A ...

  7. Java生成和操作Excel文件

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

  8. 转帖 Java生成和操作Excel文件

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

  9. (转载)Java生成和操作Excel文件

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

随机推荐

  1. 剑指offer例题——裴波那契数列

    编程题:大家都知道裴波那契数列,现在要求输入一个整数n,请你输出裴波那契数列的第n项(从0开始,第0项为0).n<=39 public class Solution { public int F ...

  2. 支持向量机通俗导论(理解SVM的三层境界)(ZT)

    支持向量机通俗导论(理解SVM的三层境界) 原文:http://blog.csdn.net/v_JULY_v/article/details/7624837 作者:July .致谢:pluskid.白 ...

  3. Examples: How to Pronounce T

    Examples: How to Pronounce T Share Tweet Share Tagged With: Flap T, Stop T The [t] sound is not alwa ...

  4. GPS坐标转换 百度地图API调用

    1 如果GPS输出的值是DD.DDDDDDDD格式的,直接调用地图API的转换函数处理,就可以正常显示2 如果GPS输出的值是DD.MMMMMMMM格式的,就需要先进行分转度处理,然后再调API,就可 ...

  5. RxJava2.0学习笔记1 2018年3月23日 星期五

    参考博文:给初学者的RxJava2.0教程-简书     源码 :https://github.com/ssseasonnn/RxJava2Demo 1 若是发送多个onError, 则收到第二个on ...

  6. 连接mysql连接不上遇到的问题

    连接不上mysql ,启动mysqld进程,发现可以启动成功,但几秒后进程立马关闭了,后来发现主要原因是因为磁盘空间满了. 报错: Can't connect to local MySQL serve ...

  7. 吴裕雄 python 爬虫(2)

    import requests from bs4 import BeautifulSoup url = 'http://www.baidu.com' html = requests.get(url) ...

  8. PS-Lite源码分析

    PS-Lite源码分析 http://blog.csdn.net/kangroger/article/details/73307685

  9. 微信小程序生命周期——小程序的生命周期及页面的生命周期。

    最近在做微信小程序开发,也发现一些坑,分享一下自己踩过的坑. 生命周期是指一个小程序从创建到销毁的一系列过程. 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面. 首先来 ...

  10. 2018面向对象程序设计(Java)第12周学习指导及要求

    2018面向对象程序设计(Java)第12周学习指导及要求 (2018.11.15-2018.11.18)   学习目标 (1) 掌握Java GUI中框架创建及属性设置中常用类的API: (2) 掌 ...