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