1. 程式人生 > >webpack打包之配置服務

webpack打包之配置服務

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

6.1  npm install webpack-dev-server   (服務外掛)

   5:把專案拖進編輯器

   6新建一個src資料夾  和webpack.config.js

7:webpack.config.js內容配置如下:

const path=require("path");
const WebpackHtmlPlugin  = require('html-webpack-plugin');
const CleanwebpackPlugin=require('clean-webpack-plugin');
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",
	        	template:"./src/index2.html",
	        	chunks:['index2'],
	        	filename:"index2.html"
	        	
	        }),
	        new CleanwebpackPlugin()
	        
	],
	devServer:{                                      //服務配置模組
		contentBase:path.resolve(__dirname,"dist"),
		host:"localhost",
		port:8090,
		open:true
	}
}


8:package.json  scripts配置如下:

 "scripts": {
    "build": "webpack --mode production",
    "dev":"webpack-dev-server --mode production"
  },


9:要打包的html  title處需配置

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


10:執行命令進行打包 npm run build  

11:開啟本地服務npm run dev