1. 程式人生 > >webpack打包html

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