webpack对第三方库进行打包 -11

 

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优化插件）
   6.8 npm install jquery              （例如打包jq）

 7： 把项目拖进编辑器并创建src文件夹和webpack.config.js 

     js里面引用jquery插件

 

 

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');     //自己新建写的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:8095,
		open:true
	}
	,
	//module:{                                             //css 图片 less压缩优化模块
		//rules:[
//		{
//			test:/\.css$/,
//			use:['style-loader','css-loader']               //css打包
//		},
//		
//		{
//			test:/\.(png|jpg|gif)$/,                       //图片打包
//			use:[
//			{
//			
//				loader:"url-loader",
//			options:{
//				limit:1000
//			}
//			}
//			
//			]
//		},
//		{
//			test:/\.less$/,                             //less打包
//			use:[
//			'style-loader','css-loader','less-loader'
//			]
//		},
//		
//		{                                                      //sass scss打包
//			test:/\.(scss|sass)$/,	
//			use:[
//			
//			'style-loader','css-loader','sass-loader'
//			]
//		}
//	
		
		//]
	//}
	
	
	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