1 webpack.config.js

const webpack = require('webpack'),

      htmlWebpackPlugin = require('html-webpack-plugin'),

      path = require('path');

module.exports = {

    entry: {

      main: './src/script/main.js',

      a: './src/script/a.js'

    },

    output: {

        path: path.resolve(__dirname, './dist'),

        filename: 'js/[name]-[chunkhash].js',

        publicPath: 'http://cdn.com/' //path输出的时候的目录 publicPath理解为占位符，需要上线地址

    },

    plugins: [

        new htmlWebpackPlugin({

            //filename: 'index-[hash].html',

            filename: 'index.html', //避免每次生成不同名的.html此时每次都会生成 index.html

            template: 'index.html',

            //inject: 'head',

            inject: false,

            title: 'webpack is good module pack',

            date: new Date(),

            minify: { //对当前的html文件进行压缩

                removeComments: true, //删除注释

                collapseWhitespace: true //删除空格

            }

        })

    ]

};

2 根目录 index.html

这里的.html同.ejs模板一样，可以使用js语法 <%= %> <% %> 、let in 、循环等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>

</head>

<body>

    <%= htmlWebpackPlugin.options.date %>

    <% for(let key in htmlWebpackPlugin) {%>

        <%= key %>

    <% } %>

    <!--注释内容-->

    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry %>"></script>

</body>

</html>

3 编译

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>webpack is good module pack</title><script type="text/javascript" src="http://cdn.com/js/main-723f6c1682e09396ec6f.js"></script></head><body>Wed Apr 05 2017 21:49:33 GMT+0800 (中国标准时间) files options<script type="text/javascript" src="http://cdn.com/js/a-28982e930ed9e24890a5.js"></script></body></html>

可以看到压缩、传参、 header body不同地方引入js、(线上)都以实现

webpack2使用ch4-向根目录index.html文件传参并使用参数 使用线上资源 压缩html的更多相关文章

  1. SpringBoot系列: Java应用程序传参和SpringBoot参数文件

    ===========================向java 程序传参的几种形式:===========================1. 使用 OS 环境变量. 这个不推荐. 2. 使用JVM ...

  2. java调用py文件传参执行

    java执行的也是py文件主函数. 传参: String url="*********************"; String[] args1 = new String[] { ...

  3. python脚本文件传参并通过token登录后爬取数据实例

    from bs4 import BeautifulSoup import requests import sys class Zabbix(object): def __init__(self, he ...

  4. 用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载

    用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载,将一个完整的项目进行展示,主要有以下几个部分: 1.servlet部分   Export 2.工具类:TxtFileU ...

  5. asp.net在网站根目录下创建文件夹

    假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下: string m_keleyiFolderName = Server.MapPath("/hovertree ...

  6. phpcms v9 源码解析（4）content模块下的index.php文件的init（）方法解析

    在了解index.php中的init函数的时候,让我们先看看最开始的几行代码 1-5  第二行, defined('IN_PHPCMS') or exit('Nopermission resource ...

  7. 【转】忙里偷闲写的小例子---读取android根目录下的文件或文件夹

    原文网址:http://www.cnblogs.com/wenjiang/p/3140055.html 最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还 ...

  8. 【转】读取android根目录下的文件或文件夹

    原文网址:http://my.oschina.net/Ccx371161810/blog/287823 读取android根目录下的文件或文件夹 SDK的操作 读取android根目录下的文件或文件夹 ...

  9. 某返利网站admin目录index.php文件混淆加密算法分析

    ---恢复内容开始--- 文件已经加密,可以在此下载:index.php 文件内容打开大概如此: 简单字符替换之后,发现字符串用base64_decode仍无法解码. 找到一个解码网站:找源码 解码后 ...

随机推荐

  1. CentOS7 安装Nginx+MySQL

    首先我们需要安装nginx的yum源 [root@AD ~]# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-releas ...

  2. 201521123026 《Java程序设计》第4周学习总结

    1. 本章学习总结 尝试使用思维导图总结有关继承的知识点 使用常规方法总结其他上课内容 1.类的重写:在子类中重写的方法需要和父类被重写的方法具有相同的方法名.参数列表以及返回值类型.当子类重写父类的 ...

  3. 201521123056 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 思维导图如下: 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要 ...

  4. 201521123106 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  5. 201521123053《Java课程设计》第十四周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 知识点: 创建表的命令有若干行,如果中间某行输入错误,不能修改:可以使用记事本现将命令输入,然后复制粘贴到mys ...

  6. SparkStreming之updateStateByKey

    正文 上一篇简单的写了一个socketTextStream的demo,这个问题就是每一次不能将之前和之后的数据进行合并统一.接下来我们通过demo进行把着这个问题解决. val conf = new ...

  7. 如何使用sourcetree 或 IDEA 自带的git合并代码？

    如何将本地的wyy分支合并并推送到远端的 develop分支? 规则:最好是本地的分支wyy推送到对应的远端origin/wyy ,不建议直接推送到远端不同的分支!!所以 基本思路如下: 1.本地的w ...

  8. Jmeter之性能测试基础

    1.概念:性能测试是通过自动化的测试工具模拟多种正常峰值及负载条件来对系统的各项性能指标进行测试.负载测试和压力测试都属于性能测试,两者可以结合进行.通过负载测试,确定在各种工作负载下系统的性能,目标 ...

  9. FastDFS安装步骤

    FastDFS是用c语言编写的一款开源的分布式文件系统,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传.下 ...

  10. iOS开发中KVC、KVO简介

    在iOS开发中,KVC和KVO是经常被用到的.可以使用KVC对对象的属性赋值和取得对象的属性值,可以使用KVO监听对象属性值的变化.简单介绍一下KVC和KVO. 一:键值编码(KVC) KVC,全称 ...