64.HtmlWebpackPlugin的filename配置项使用,修改webpack.config.js文件,修改内容如下

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {	entry:  __dirname + "/app/Greeter.js",	output: {		path: __dirname + "/build",		filename: "bundle.js"	},	devServer:{		contentBase:"./public",		historyApiFallback:true,		inline:true	},	module:{		loaders:[			{				test:/\.json$/,				loader:"json-loader"			},			{				test:/\.js$/,				exclude:/node_modules/,				loader:'babel-loader'			},			{				test:/\.css$/,				loader:'style-loader!css-loader?modules'			}		]	},	plugins:[		new webpack.BannerPlugin("copyright suyan"),		new HtmlWebpackPlugin({			template:__dirname + "/app/index.tmpl.html",			title:'htmlwebpackplugin filename test',			filename:'filename.html'		})	]}

说明

输出文件的文件名称，默认为index.html,filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的.

65.在命令使用webpack命令进行打包,生成的目录结构如下

66.生成的filename.html内容如下

</html>

本文转自 素颜猪 51CTO博客，原文链接: