（一）使用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. EventBus 源码学习

    打开一看,原来相关代码并不多,下面看下细节 主要方法也就是注册,取消注册和发送事件,可以看到两个主要的变量就是subscribers和dispatcher public void register(O ...

  2. Oracle 学习总结 - 问题诊断

    搜集常用诊断sql https://blog.csdn.net/yangshangwei/article/details/52449489 lock相关: 1. 查看lock, 打开两个事物,事物1更 ...

  3. Lazarus中Windows单元问题

    在程序中加入Windows 单元后,经常会使一些过程和函数莫名其妙的报错,这是因为Windows单元很多函数,过程 与sysutils 单元重名 ,所以一般要把windows 引用放在 sysutil ...

  4. CSRF学习小结

    什么是CSRF CSRF,全称是Cross Site Request Forgery,也即跨站请求伪造.对于CSRF来说,它的请求有两个关键点:跨站点的请求和请求是伪造的. 跨站点的请求的来源是其他站 ...

  5. groovy语法

    1.注释1.1. 单行注释1.2. 多行注释1.3. GroovyDoc注释1.4. Shebang线2.关键词3.标识符3.1. 普通标识符3.2. 带引号的标识符4.字符串4.1. 单引号字符串4 ...

  6. python笔记之强制函数以关键字参数传参

    最近学习python,学到了函数传参,看到了以下这个特殊情况,特此来做个笔记 def add(*, x, y): print(x, y) 以上函数定义后,该怎么传参?前面的那个*号是做什么用的? 我们 ...

  7. [PHP]PHP自定义遍历目录下所有文件的方法

    header('content-type:text/html;charset=utf-8');/** *   方法一:使用readir()遍历目录 */function listDir($dir){  ...

  8. 自定义 mapper的实现

    json格式,要想好看直接百度,json,将字符放进去就可 一步:将mapper复制一份,名字加一个Custom自定义 二步:mpper.xml也是一样,设置里面的namespace映射关系 自定义m ...

  9. 生成一个文件夹中的所有文件的txt列表

    1.windows操作系统中 1.用管理员运行打开dos界面: 2.用cd转到相应的文件夹中: 3.用dir /b /on >list.txt来生成文件列表的txt. 2.Mac系统中 1.打开 ...

  10. Java8给出一个时间段，计算该时间范围由哪些日期(天)和月份组成

    1. 判断时间段是否合法: 2. 循环判断记录数是否大于0 3. 根据起始时间算出该月的第一天.最后一天和这个月有多少天: 4. 判断起始时间是否是该月第一天,如果是,再判断结束时间与该月最后一天的大 ...