webpack4 打包html资源

1、下载插件
	cnpm i -D html-webpack-plugin

2、引入插件
	const X = require('html-webpack-plugin');

3、使用插件
	该插件作用:
	(1)会自动创建html文件,并自动引入打包后的资源文件
	(2)若使用了template指定资源模板后,创建的html会复制该文件

	plugins:[
		new X(template:'要复制的指定html模板文件路径')
	]
	输出文件的文件名称，默认为index.html
	
4、压缩html代码
	plugins:[
		new X({ 
			template:'要复制的指定html模板文件路径'
			minify: {
        		collapseWhitespace: true, 折叠空格
        		removeComments:true  移除注释
      		}			
		}),
		其他额外参数:
		new X({ 
			template:'要复制的指定html模板文件路径',
			templateContent: string|function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。
			filename:输出文件的文件名称，默认为index.html，
			hash:true,  给引用文件添加hash值
			inject:'body', 
				true || 'head' || 'body' || false将所有资产注入到给定的template或templateContent中。
				body',所有javascript资源将被放置在body元素的底部。
				head,将把脚本放置在head元素中。
				true,将把它添加到头部/主体。
				false,将禁用自动注射。—请参见inject:false示例
			chunks:['app'],		允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
				使用于多页面打包
			excludeChunks:['app'],	排除注入的chunk
			chunksSortMode:'auto'	引入资源的顺序
				'none' | 'auto' | 'manual' | {Function}
				'manual'	手动排序,即根据entry中的顺序进行引入
			minify: {
        		collapseWhitespace: true, 折叠空格
        		removeComments:true,  移除注释
        		html5:true,
        		minifyCSS:true,
        		minifyJS:true,
        		
      		}			
		}),
	]

代码示例:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path:path.resolve(__dirname,'build')
  },
  module: {
    rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
      {
        test: /\.css$/, //匹配文件名
        use: [//使用哪些loader
          'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
          'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
        ] 
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader', 
          'less-loader', //将less文件编译成css文件
        ]
      }
    ]
  },
  //插件
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html', //将模板复制成指定文件
      minify: {
        collapseWhitespace: true, //折叠空格
        removeComments:true  //移出注释
      }
    }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
  ],
  mode:'development'
}