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编译插件）

   5：把项目拖进编辑器

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

 

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

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

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

	        	},
	        	

	        	title:"hello",       //打包成功后的名字
                hash:true,          //图片缓存
                filename:"index.html"           //要打包的html名字    
	        	template:"./src/index.html"     //要打包的html路径
	        	
	        })
	]
}

8：package.json  scripts配置如下：

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

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

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

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