webpack2使用ch4-向根目录index.html文件传参并使用参数 使用线上资源 压缩html
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的更多相关文章
- SpringBoot系列: Java应用程序传参和SpringBoot参数文件
===========================向java 程序传参的几种形式:===========================1. 使用 OS 环境变量. 这个不推荐. 2. 使用JVM ...
- java调用py文件传参执行
java执行的也是py文件主函数. 传参: String url="*********************"; String[] args1 = new String[] { ...
- python脚本文件传参并通过token登录后爬取数据实例
from bs4 import BeautifulSoup import requests import sys class Zabbix(object): def __init__(self, he ...
- 用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载
用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载,将一个完整的项目进行展示,主要有以下几个部分: 1.servlet部分 Export 2.工具类:TxtFileU ...
- asp.net在网站根目录下创建文件夹
假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下: string m_keleyiFolderName = Server.MapPath("/hovertree ...
- phpcms v9 源码解析(4)content模块下的index.php文件的init()方法解析
在了解index.php中的init函数的时候,让我们先看看最开始的几行代码 1-5 第二行, defined('IN_PHPCMS') or exit('Nopermission resource ...
- 【转】忙里偷闲写的小例子---读取android根目录下的文件或文件夹
原文网址:http://www.cnblogs.com/wenjiang/p/3140055.html 最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还 ...
- 【转】读取android根目录下的文件或文件夹
原文网址:http://my.oschina.net/Ccx371161810/blog/287823 读取android根目录下的文件或文件夹 SDK的操作 读取android根目录下的文件或文件夹 ...
- 某返利网站admin目录index.php文件混淆加密算法分析
---恢复内容开始--- 文件已经加密,可以在此下载:index.php 文件内容打开大概如此: 简单字符替换之后,发现字符串用base64_decode仍无法解码. 找到一个解码网站:找源码 解码后 ...
随机推荐
- WPF--鼠标右键菜单中的Command命令实现
一个功能,在ListView中的ListBoxItem控件上实现右键菜单关闭选项,将该ListBoxItem从ListView中删除. 利用 RoutedCommand类创建Command命令,MSD ...
- selenium chromedriver与谷歌浏览器版本映射表 (更新至v2.32)
----------ChromeDriver v2.32 (2017-08-30)---------- Supports Chrome v59-61最新的ChromeDriver 2.32 支持谷歌浏 ...
- ArrayBuffer和TypedArray,以及Blob的使用
前端使用TypedArray编辑二进制 ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过Fil ...
- 基于C语言的UTF-8中英文替换密码设计
简要说明 本设计为湖南大学密码学的一次课程作业设计.非作业目的可随意引用. 由于本人初次接触密码学,本设计可能存在问题以及漏洞.若发现望指出. GitHub : https://github.com/ ...
- docker在CentOS7下部署指南
docker只支持CentOS7.x系统,所以近期根据docker官网指南自己搭建了一套,供大家参考. 1.部署Centos7.x系统,查看系统版本. 2.执行 sudo yum update 更新到 ...
- 安装Window下Jenkins
之前没接触过持续集成工具,之前只是了解了下自动化部署,最近一直在看自动化集成这块,发现要学的东西好多好多,可能在小公司用的不多,但如果在大公司,如果每个项目都要手动build.deploy的话那也太耗 ...
- 软件工程(GZSD2015)学生博客列表
2015年贵州师范大学软件工程课程学生博客列表 陈小丽 郑倩 唐洁 周娟 李利思 肖俊 罗文豪 周静 徐明艳 毛涛 邓洪虹 岳庆 李盼 安坤 何亚 涂江凤 张义平 杨明颢 杨家堂 胡贵玲 寿克霞 吴明 ...
- Java课程设计——博客作业教学数据分析系统(201521123091 李嘉廉)
#课程设计--博客作业教学数据分析系统(201521123084 李嘉廉) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 數據分析 Kmeans聚類算法實現 多元綫性 ...
- KKlist团队目录
KKlist团队目录 一.Daily Scrum Meeting[Alpha] 4.22 day one 4.23 day two 4.24 day three 4.25 day four 4.26 ...
- 201521123013 《Java程序设计》第14周学习总结
1. 本周学习总结 2. 书面作业 Q1. MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 1.2 在自己建立的数据库上执行常见SQ ...