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. WPF--鼠标右键菜单中的Command命令实现

    一个功能,在ListView中的ListBoxItem控件上实现右键菜单关闭选项,将该ListBoxItem从ListView中删除. 利用 RoutedCommand类创建Command命令,MSD ...

  2. selenium chromedriver与谷歌浏览器版本映射表 (更新至v2.32)

    ----------ChromeDriver v2.32 (2017-08-30)---------- Supports Chrome v59-61最新的ChromeDriver 2.32 支持谷歌浏 ...

  3. ArrayBuffer和TypedArray，以及Blob的使用

    前端使用TypedArray编辑二进制 ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过Fil ...

  4. 基于C语言的UTF-8中英文替换密码设计

    简要说明 本设计为湖南大学密码学的一次课程作业设计.非作业目的可随意引用. 由于本人初次接触密码学,本设计可能存在问题以及漏洞.若发现望指出. GitHub : https://github.com/ ...

  5. docker在CentOS7下部署指南

    docker只支持CentOS7.x系统,所以近期根据docker官网指南自己搭建了一套,供大家参考. 1.部署Centos7.x系统,查看系统版本. 2.执行 sudo yum update 更新到 ...

  6. 安装Window下Jenkins

    之前没接触过持续集成工具,之前只是了解了下自动化部署,最近一直在看自动化集成这块,发现要学的东西好多好多,可能在小公司用的不多,但如果在大公司,如果每个项目都要手动build.deploy的话那也太耗 ...

  7. 软件工程（GZSD2015）学生博客列表

    2015年贵州师范大学软件工程课程学生博客列表 陈小丽 郑倩 唐洁 周娟 李利思 肖俊 罗文豪 周静 徐明艳 毛涛 邓洪虹 岳庆 李盼 安坤 何亚 涂江凤 张义平 杨明颢 杨家堂 胡贵玲 寿克霞 吴明 ...

  8. Java课程设计——博客作业教学数据分析系统（201521123091 李嘉廉）

    #课程设计--博客作业教学数据分析系统(201521123084 李嘉廉) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 數據分析 Kmeans聚類算法實現 多元綫性 ...

  9. KKlist团队目录

    KKlist团队目录 一.Daily Scrum Meeting[Alpha] 4.22 day one 4.23 day two 4.24 day three 4.25 day four 4.26 ...

  10. 201521123013 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 Q1. MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 1.2 在自己建立的数据库上执行常见SQ ...