webpack htmlWebpackPlugin 静态资源 版本控制
plugins: [
new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间，通常推到生产环境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目录(package内设置)生成静态HTML文件
title: "自动生成网页标题",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
inject: true, // | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一个模块
})
]
Installation
使用 npm 安装这个插件
$ npm install html-webpack-plugin@2 --save-dev
Basic Usage
这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
如果你有多个 webpack 入口点，它们都会被包含在生成的 script 元素中。
如果有任何的 CSS 资源包含在 webpack 输出中（例如，使用 ExtractTextPlugin 提炼出的 css ），这些将会使用 link 包含在 HTML 页面的 head 元素中。
Configuration
可以进行一系列的配置，支持如下的配置信息
- title: 用来生成页面的 title 元素
- filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
- template: 模板文件路径，支持加载器，比如 html!./index.html
- inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
- favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
- minify: {} | false , 传递 html-minifier 选项给 minify 输出
- hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
- cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
- showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
- chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
- chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)
下面的示例演示了如何使用这些配置。
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
hash: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}
生成多个 HTML 文件
通过在配置文件中添加多次这个插件，来生成多个 HTML 文件。
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}
编写自定义模板
如果默认生成的 HTML 文件不适合你的需要看，可以创建自己定义的模板。方便的方式是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'my-index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]
my-index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
如果你有模板加载器，可以使用它来解析这个模板。
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs',
inject: 'body'
})
]
另外，如果你的模式是一个字符串，可以使用 templateContent 传递它。
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]
如果 inject 特性不适合你的需要，你希望完全控制资源放置。 可以直接使用 lodash 语法，使用 default template 作为起点创建自己的模板。
templateContent 选项也可以是一个函数，以便使用其它语言，比如 jade：
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation) {
// Return your template content synchronously here
return '..';
}
})
]
或者异步版本
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation, callback) {
// Return your template content asynchronously here
callback(null, '..');
}
})
]
注意，如果同时使用 template 和 templateContent ，插件会抛出错误。
变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：
- htmlWebpackPlugin: 这个插件的相关数据
- htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。
"htmlWebpackPlugin": {
"files": {
"css": [ "main.css" ],
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
"main": {
"entry": "assets/main_bundle.js",
"css": []
},
}
}
}如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源
- htmlWebpackPlugin.options: 传递给插件的配置。
- webpack: webpack 的 stats 对象。
- webpackConfig: webpack 配置信息。
过滤块
可以使用 chunks 来限定特定的块。
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]
还可以使用 excludeChunks 来排除特定块。
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]
事件
通过事件允许其它插件来扩展 HTML。
html-webpack-plugin-before-html-processinghtml-webpack-plugin-after-html-processinghtml-webpack-plugin-after-emit
使用方式：
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback();
});
下面是一个在使用的webpack配置文件
————————————————————————————————————————————————
/**
* Created by Administrator on 2016/8/14.
*/
var webpack = require("webpack")
var htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
app: "./lib/main.js"
},
output: {
path: "./",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015'] // babelrc 文件一定不要忘了
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间，通常推到生产环境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目录(package内设置)生成静态HTML文件
title: "自动生成网页标题",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
inject: true, // | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一个模块
})
]
}
.babelrc
{
"presets": ["es2015","stage-0"],
"plugins": ["transform-runtime"]
}
webpack htmlWebpackPlugin 静态资源 版本控制的更多相关文章
- Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件
Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- SpringBoot2.0实现静态资源版本控制
写在最前面 犹记毕业第一年时,公司每次发布完成后,都会在一个群里通知[版本更新,各部门清理缓存,有问题及时反馈]之类的话.归根结底就是资源缓存的问题,浏览器会将请求到的静态资源,如JS.CSS等文件缓 ...
- webpack打包静态资源和动态资源
1.对于静态引用的资源: <img src = "static/modelname/imgname.png"> // 修改为下面的写法 <img src = &q ...
- Webpack将静态资源拷贝并压缩至输出文件夹
就拿Vue项目来说,比如要将src/assets/js下的静态js文件,直接在public/index.html中引用: 这时候没有在项目中引用,不会经过wenpack的loader,也就不会自己打包 ...
- spring mvc 静态资源版本控制
spring bean 文件中增加 <bean class="cn.zno.smse.common.context.VersionServletContext">< ...
- gulp 静态资源版本控制
package.json { "name": "gulp", "version": "0.0.1", "des ...
- gulp之静态资源防缓存处理
最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...
- SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)
近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...
随机推荐
- IFeatureCursor.Flush
IFeatureCursor.Flush Method Flush any outstanding buffered writes to the database. [Visual Basic .NE ...
- [ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- FIL Dalian Jobs
Department Vacancies Total Skill Set Experience Language Hiring Manager Business Finance Finance Ana ...
- iOS-多线程之NSThread详解
前言 线程是用来执行任务的,线程彻底执行完任务A才能去执行任务B.为了同时执行两个任务,产生了多线程. 我打开一个视频软件,我开辟一个线程A让它执行下载任务,我开辟一个线程B,用来播放视频.我开辟两个 ...
- 插入排序（java版）
public class InsertSortTest{ public static void InsertSort(int[] source) { //默认第一个元素已排序 for (int i = ...
- iOS之UI--自定义IOS的HYCheckBox源码的使用
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- iOS之多控制器管理--项目中的常见文件
项目中的常见文件 内容大纲: 1.LaunchScreen 2.info.plist文件 3.pch文件 1.LaunchScreen xcode5和xcode6区别 1.xcode6没有Framew ...
- dig与dns基本理论——解析和缓存
DNS(Domain Name System,域名系统)也许是我们在网络中最常用到的服务,它把容易记住的域名,如 www.google.com 翻译成人类不易记住的IP地址,如 173.194.127 ...
- Java静态同步方法和非静态同步方法
所有的非静态同步方法用的都是同一把锁——该实例对象本身.也就是说如果一个实例对象的非静态同步方法获取锁后,该实例对象的其他非静态同步方法必须等待获取锁的方法释放锁后才能获取锁进而执行 ...
- [LoadRunner]性能测试实践_Hessian协议脚本编写2
协议选取和运行配置请参考:http://www.cnblogs.com/whylaughing/p/5430821.html 这次直接贴代码让大家参考: import lrapi.lr; import ...