js写了一个方法要进行封装打包 -10

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   (服务插件)

   6.2  npm install style-loader css-loader  （css打包插件）

   6.3 npm install file-loader url-loader    (文件图片打包插件)

   6.4 npm install less-loader    (less打包插件)

   6.5 npm install sass scss --save-dev       （sass scss打包插件）

   6.6 npm install sass-loader nade-sass      (sass打包插件)

   6.7 npm install purifycss-webpack purify-css （css优化插件）
7：把项目拖进编辑器并创建test.js和webpack.config.js 如我要对这show方法进行打包封装进webpack。config里面

  

8：webpack.config.js代码如下：

const path=require("path");
const WebpackHtmlPlugin  = require('html-webpack-plugin');
const CleanwebpackPlugin=require('clean-webpack-plugin');  //不用每一次去删除dist文件夹会自动删除
const Purify=require('purifycss-webpack'); //css优化去重复无效代码
const glob=require('glob');  //css优化
const rules=require('./webpack.rules.js');  //导入分写的js模块
const test=require('./src/test.js');     //自己新建show写的js导入打包封装

module.exports={
	entry:{                                          //导入模块
		index:'./src/index.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:"tttttttt",               //打包出来的文件夹名字
	        	template:"./src/index.html",      //要打包的html文件路径
	        	chunks:['index'],
	        	hash:true,
	        	filename:"index.html"  ,//要打包的文件夹名字
	        	
	        }),
	        new WebpackHtmlPlugin({
	        	minify:{
	        		collapseWhitespace:true,      //清除空格
	        		removeAttributeQuotes:true,    //清除多余引号
	        		removeComments:true           //删除注释

	        	},
	        	

	        	title:"ttttttt2",
	        	template:"./src/index2.html",
	        	chunks:['index2'],
	        		hash:true,
	        	filename:"index2.html"
	        	
	        }),
	        new CleanwebpackPlugin(),    //不用每一次去删除dist文件夹会自动删除
	        
	        new Purify({         //css优化去重去无效代码
	        	paths:glob.sync(path.join(__dirname,"src/*.html"))
	        })
	        
	        
	],
	devServer:{                                             //开启服务器模块
		contentBase:path.resolve(__dirname,"dist"),
		host:"localhost",
		port:8094,
		open:true
	}
	,
	
	
	
	module:{rules}            //导入分写js模块
}

10：package.json  scripts配置如下：

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

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

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

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

13：开启本地服务npm run dev