webpack 打包之html多个打包

1：确保自己的电脑已经安装了node和Git软件

2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称)

3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：

    1：npm install webpack -g            

    2:  npm install webpack-cli -g

    3: npm init -y

    4: npm install webpack --save-dev

   5  npm install html-webpack-plugin    （html编译插件）

 6：npm install clean-webpack-plugin

   5：把项目拖进编辑器

   6新建一个src文件夹  和webpack.config.js

 

7:webpack.config.js内容配置如下：

const path = require("path");
const WebpackHtmlPlugin = require('html-webpack-plugin');  //导入html打包插件
const clear= require("clean-webpack-plugin");  //导入清除dist插件 不用手动每次去删除dist文件
                                                //   夹

module.exports = {
	entry: {
		index1: './src/index1.js',
		index2: './src/index2.js'
	},
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js"
	},
	plugins: [
		new WebpackHtmlPlugin({
			minify: {
				collapseWhitespace: true, //清除空格
				removeAttributeQuotes: true, //清除多余引号
				removeComments: true //删除注释
			},
			title: "hello",
			template: "./src/index.html",
			chunks: ['index'],
			filename: "index.html"

		}),
		new WebpackHtmlPlugin({
			minify: {
				collapseWhitespace: true, //清除空格
				removeAttributeQuotes: true, //清除多余引号
				removeComments: true //删除注释
			},
			title: "hello2",          //打包成功后的html名字
			template: "./src/index2.html",//要打包的文件路径
			chunks: ['index2'],
			filename: "index2.html"          //要打包的文件名称

		}),
        new clear（）     //导入模块清除dist插件 不用手动每次去删除dist文件
                                                //   夹

	]
}

8：package.json  scripts配置如下：

"scripts": {
     "build": "webpack --mode production"    //production生产环境  development开发环境
  },

9：要打包的html  title处需配置

<title><%=htmlWebpackPlugin.options.title%></title>

10：执行命令进行打包 npm run build