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. chrome开发工具指南（一）

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  2. 联合线程（案例顾客买蛋糕 ：使用join()方法）

    运行效果图:

  3. 201521123099 《Java程序设计》第八周学习总结

    1. 本周学习总结 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 老师上课解释的还有私下问同学大概能懂.主要理解到一点在删除List中元素时要考虑元素删除 ...

  4. 201521123113 《Java程序设计》第1周学习总结

    1. 本章学习总结 1.java是一个面向对象的编程语言,相对于c++来说代码较简便又好用.第一次接触java时感觉每句代码比较难写,但学习了一些快捷方法后就很方便了. 2.java运行于JVM,因此 ...

  5. 小Writeup

    Misc 100 下载文件之后是一个zip压缩包.因为一开始没有给任何提示信息,题目也什么都没说,爆破了一会无果.同时不是伪加密,所以应该是明文攻击.之后官方给出提示,是一个网址. F12进入调试,发 ...

  6. 201521123009 《Java程序设计》第12周学习总结

    1. 本周学习总结 2. 书面作业 Q1:将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示 ...

  7. 201521123104《java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  8. 201521123026《JAVA程序设计》第11周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1.多线程同步:限制某个资源在同一时刻只能被一个线程访问.. 2.同步代码块:`synchronized(lock ...

  9. 解决liblzo2.so缺失

    系统:CentOS5.8 提示错误: error while loading shared libraries: liblzo2.so.2: cannot open shared object fil ...

  10. 纳税服务系统【统计图Fusionchart】

    需求 我们在投诉模块中还有一个功能没有实现: 统计:根据年度将相应年度的每个月的投诉数进行统计,并以图表的形式展示在页面中:在页面中可以选择查看当前年度及其前4年的投诉数.在页面中可以选择不同的年度, ...