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. Java之JMX 详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt194 一.JMX简介 JMX是一种JAVA的正式规范,它主要目的是让程序有被 ...

  2. poj 3635 带花费的Dij+head优化

    练习!! 这里主要需要注意的是进队的条件和dp[][]状态的控制,dp[i][j]表示到第i个城市剩余汽油为j的最小花费. 代码: #include<iostream> #include& ...

  3. 计算理论：NFA转DFA的两种方法

    本文将以两种方法实现NFA转DFA,并利用C语言实现. 方法二已利用HNU OJ系统验证,方法一迷之WA,但思路应该是对的,自试方案,测试均通过. (主要是思路,AC均浮云,大概又有什么奇怪的Case ...

  4. Java学习记录：降低耦合度

    耦合度定义 耦合度(Coupling)是对模块间关联程度的度量.耦合的强弱取决与模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少. 模块间的耦合度是指模块之间的依赖关系,包括控制关系.调用 ...

  5. C# 反向生成工具（DAL BLL Modle）

    VS2015  ADO.NET无果后果断~! 动软生成:http://pan.baidu.com/s/1gfIf0ZL

  6. Python3 多线程的两种实现方式

    最近学习 Python3 ,希望能掌握多线程的使用,在此做个笔记.同时也希望Python 牛人指点错误.关于线程的概念,前面简单总结了一下 java 的多线程,传送门:java 多线程概念,三种创建多 ...

  7. 201521123106 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1 ...

  8. 201521123007《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.1有关继承的知识点: 1.2有关多态 多态性:相同的形态,不同的行为.体现在相同的方法名 ...

  9. 201521123020《Java程序设计》第2周学习总结

    一.学习总结 学习了运算符的基本使用方法: 学习了string这个特殊的类型: 学习了数组的使用方法. 二.书面作业 1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)? ...

  10. 201521123093 JAVA程序设计

    团队博客链接 /[博客链接]http://www.cnblogs.com/yayaya/p/7062197.html 课程设计---购物车系统(201521123093 赵铭) 1.个人负责模块或者任 ...