webpack(二) 根据模板生成简单的html文件

(一)使用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 文件 。

 
时间: 2024-10-22 03:19:10

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

XStream生成简单的XMl文件

一.生成简单的XML文件: 1.新建ResumeToXml.java文件 package com.saicfc.pmpf.resume.bocom.utils.resume; /** * 把Java对象转化成xml * @author lizhiyong * @version $Id: RefundToXml.java, v 0.1 2014年6月5日 下午3:44:54 Exp $ */ @SuppressWarnings("unused") public class ResumeT

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

原文地址:http://www.niu12.com/article/16 php使用phpword将word内容变量替换 a.安装phpword composer require phpoffice/phpword b.当前目录下a.docx,假设word内容需要替换的变量为 说明人:${user} 电话:${email} c.php改写word内容 参考地址 <?php // 根据模板生成用户信息word $templateProcessor = new TemplateProcessor(&qu

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

接着这篇文章php命令行生成项目结构 继续改造: [email protected]:~/php/php1/12$ tree . ├── app │   └── index.php ├── core │   ├── frame │   │   ├── ghost_frame.php │   │   └── template │   │   └── index.tpl │   └── ghostinit.php ├── function.php ├── ghost └── go.json inde

XStream生成简单的XMl文件2

1.新建RequestInfo.java文件: package com.saicfc.pmpf.resume.ccb.utils; /** * 支付查询请求信息 * @author lizhiyong * @version $Id: RequestInfo.java, v 0.1 2014年7月24日 下午2:43:39 Exp $ */ public class RequestInfo { public String REQUEST_SN; public String CUST_ID; pub

Java生成和操作Excel文件

JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过纯Java应用来处理Excel数据表.因为它是使用Java编写的,所以我们在Web应用中可以通过JSP.Servlet来调用API实现对Excel数据表的访问. 下载: 官方网站 http://www.andykhan.com/jexcelapi/ 下载最新版本(本人下的是jexcelapi_2_6

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

JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过纯Java应用来处理Excel数据表.因为它是使用Java编写的,所以我们在Web应用中可以通过JSP.Servlet来调用API实现对Excel数据表的访问. 下载: 官方网站 http://www.andykhan.com/jexcelapi/ 下载最新版本(本人下的是jexcelapi_2_6

Java生成和操作Excel文件 - 残星 - 博客园 (2)

body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;

Java生成和操作Excel文件 - 残星 - 博客园

body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;

Java基础系列19:使用JXL或者POI生成和解析Excel文件

一 简介 如题所示,当我们需要在Java中解析Excel文件时,可以考虑使用JXL或POI的API来解析. 二者的区别如下: jxl现在基本上没被维护了,最近一次更新时间还是几年前.相反,poi属于Apache开源项目的一部分,更新维护得比较好,最新稳定版 POI 3.15 是今年(2016年)9月更新的,同时poi可以支持更高版本的excel,而jxl只能支持excel2003以及之前的版本 小文件使用jxl解析效率比较高,但是因为支持的excel版本的限制,导致不能导出65535以上量级的数