这个是可以自动生成一个html文件的webpack模板插件
常用参数如下：
title : 用于生成的HTML文件的标题。 filename : 用于生成的HTML文件的名称，默认是index.html。你可以在这里指定子目录（例如:assets/admin.html） template : 模板的路径。支持加载器，例如 html!./index.html。 inject :true | ‘head’ | ‘body’ | false 。把所有产出文件注入到给定的 template 或templateContent。当传入 true或者 ‘body’时所有javascript资源将被放置在body元素的底部，“head”则会放在head元素内。 favicon : 给定的图标路径，可将其添加到输出html中。 minify : {…} | false 。传一个html-minifier 配置object来压缩输出。 hash : true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。 cache : true | false 。如果传入true（默认），只有在文件变化时才 发送（emit）文件。 showErrors : true | false 。如果传入true（默认），错误信息将写入html页面。 chunks : 只允许你添加chunks 。（例如：只有单元测试块 ） chunksSortMode : 在chunk被插入到html之前，你可以控制它们的排序。允许的值 ‘none’ | ‘auto’ | ‘dependency’ | {function} 默认为‘auto’. excludeChunks : 允许你跳过一些chunks（例如，不要单元测试的 chunk）. xhtml : 用于生成的HTML文件的标题。 title : true | false。如果是true，把link标签渲染为自闭合标签，XHTML要这么干的。默认false。
简单实例
目录结构
首页index.html由模板自动生成，内容跟着模板变化
src/tpl下的index.html模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p><%= htmlWebpackPlugin.options.title %></p>
<div>this page is module</div>
</body>
</html>
webpack.config.js配置文件
var webpack = require("webpack"); var webpckDevServer = require("webpack-dev-server"); var ExtractTextPlugin = require('extract-text-webpack-plugin');//抽离css插件 var extractCss = new ExtractTextPlugin("css/[name].css");//实例化，并并填写输出的一个路径[]中表示输出默认名称,这个目录相对于提出的那个目录 var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports={ entry: __dirname +"/src/index.js",//入口文件 webpack-dev-server 实时刷新监控的目录 output:{ path: __dirname +"/public/", filename: "js/test.js", // publicPath: '/assets/'//打开webpack-dev-server 服务器工具时可以再index里面引用此地址，打开速度会快一点,另外他不是直接在内存中存放而是先在webpack的虚拟内存中暂存,所以在webpack未编译之前能够运行，如果直接写实体目录则不经过webpack打包编译，浏览器是识别不了的，所以先放在这个虚拟目录里，因为是虚拟目录，所以你看不到他的编译文件 }, devServer:{ contentBase:"./",//根目录 host:'192.168.199.171',//ip设置 port:"8080",//端口 colors:true, open:true//自动打开浏览器 }, module:{ loaders:[ //用extract-text-webpack-plugin插件提取css就不能再运行这个，要不然就冲突了，所以注释，现注入，在提出 { test:/.css$/,//匹配.css文件 // loader:'style-loader!css-loader'//用style-loader去解释css loader : ExtractTextPlugin.extract("style-loader", "css-loader") } , { test: /.scss$/, // loader: "style-loader!css-loader!sass-loader" loader: ExtractTextPlugin.extract("style-loader", "css!sass") } ] } , plugins:[ extractCss, new HtmlWebpackPlugin({ title:'wwww',//对应模板中的这个文件 <%= htmlWebpackPlugin.options.title %> filename: '../index.html', //修改默认html的存放位置 template: __dirname +'/src/tpl/index.html', inject:'body', info: 'Custom template using Handlebars' //对应模板中的这个文件 <%= htmlWebpackPlugin.options.info %> }), // new HtmlWebpackPlugin({ //生成多个文件可以多些一个这个 // title:'wwww', // filename: '../demo.html', //修改默认html的存放位置 // template: __dirname +'/src/tpl/index.html', // inject:'body', // info: 'Custom template using Handlebars' // }) ] }
package.json文件
{ "name": "webp2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "demo": "webpack --watch --progress -d -p --color", "demo2": "webpack --config webpack.config123.js --watch --progress -d -p --color", "devServer": "webpack-dev-server --inline --hot" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.26.1", "extract-text-webpack-plugin": "^1.0.1", "html-webpack-plugin": "^2.24.1", "node-sass": "^4.0.0", "sass-loader": "^4.1.0", "style-loader": "^0.13.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" } }