首先需要安装

npm intall html-webpack-plugin

配置

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry:'./hello.js',
	output:{
		path:  __dirname+"/dist",
		filename:'[name]-[hash].js'
	},
	mode: 'development',
	plugins:[
		new htmlWebpackPlugin({
			
		})
	]
}

这样配置生成的html会自动在body中插入动态的js，我们应该为我们的模板指定，这样才能联动。
还可以指定插入位置，生成的文件名

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry:'./hello.js',
	output:{
		path:  __dirname+"/dist",
		filename:'[name]-[hash].js'
	},
	mode: 'development',
	plugins:[
		new htmlWebpackPlugin({
			filename:'index-[hash].html',
			template:'index.html',
			inject:'head'
		})
	]
}

高级用法，传参，查考官方文档，<%=htmlWebpackPlugin.options%>和
<%=htmlWebpackPlugin.files%>

output的publicPath可以为我们项目上线指定域名

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry:'./hello.js',
	output:{
		path:  __dirname+"/dist",
		filename:'[name]-[hash].js',
		publicPath:'http://www.hbk.com'
	},
	mode: 'development',
	plugins:[
		new htmlWebpackPlugin({
			filename:'index-[hash].html',
			template:'index.html',
			inject:'head'
		})
	]
}

在打包生成的html，可以看到自动加上了publicPath

minify:{
	removeComments:true,
	collapseWhitespace:true
	}

这两个配置可以删除注释和空格，使代码压缩在一起，减小文件体积。
entry以对象的形式，还可以在htmlWebpackPlugin中配置chunks，以实现多html文件模板配置

plugins:[
		new htmlWebpackPlugin({
			filename:'index-[hash].html',
			template:'index.html',
			inject:'head',
			minify:{
				removeComments:true,
				collapseWhitespace:true
			}，
			chunks:['main','a']
		})
	]

在webpack3.x中还保留之前版本的loaders，与rules并存都可以使用，在新版中完全移除了loaders，必须使用rules。

所以在配置文件中配置loaders需要看你安装的webpack版本，4版本的配置文件中增加loaders会报错。

示例配置：

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry:'./hello.js',
	output:{
		path:  __dirname+"/dist",
		filename:'[name]-[hash].js',
		publicPath:'http://www.hbk.com'
	},
	mode: 'development',
	 module: {
        rules: [
            { test: /.css$/, loader: "style-loader!css-loader" },
            { test:/.css$/,loader:'style-loader!css-loader'}
        ]
    }
}

其他参数
exclude 排除
include 包含 这两个参数主要是为了加快打包速度
loader 使用!进行分割
loaders 以数组的形式

安装webpack-dev-server

npm install webpack-dev-server -g

运行

webpack-dev-server --progress --colors

postcss-loader针对css文件的后置处理器。
autoprefixer 给css样式文件针对不同浏览器增加前缀
处理less文件，有less-loader
使用npm进行安装

npm install less-loader --save-dev

先后顺序

test:/.less$/,
loader:'style!css!postcss!less'

同理，处理sass文件，使用sass-loader

npm install sass-loader --save-dev

针对模板，同样支持，更多信息参考官网相关信息。