less 打包 -6

   

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打包插件)

   7：把项目拖进编辑器

   8新建一个src文件夹  和  less文件夹       和webpack.config.js

8.1webpack.cofig.js文件配置如下

const path=require("path");
const WebpackHtmlPlugin  = require('html-webpack-plugin');
const CleanwebpackPlugin=require('clean-webpack-plugin');

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",
	        	chunks:['index'],
	        	filename:"index.html"
	        	
	        }),
	        new WebpackHtmlPlugin({
	        	minify:{
	        		collapseWhitespace:true,      //清除空格
	        		removeAttributeQuotes:true,    //清除多余引号
	        		removeComments:true           //删除注释

	        	},
	        	

	        	title:"ttttttt2",
	        	template:"./src/index2.html",
	        	chunks:['index2'],
	        	filename:"index2.html"
	        	
	        }),
	        new CleanwebpackPlugin()
	        
	],
	devServer:{
		contentBase:path.resolve(__dirname,"dist"),
		host:"localhost",
		port:8085,
		open:true
	}
	,
	module:{
		rules:[
		{
			test:/\.css$/,
			use:['style-loader','css-loader']
		},
		
		{
			test:/\.(png|jpg|gif)$/,
			use:[
			{
			
				loader:"url-loader",
			options:{
				limit:1000
			}
			}
			
			]
		},
		{
			test:/\.less$/,                //less打包模块
			use:[
			'less-loader','style-loader','css-loader'
			]
		}
		]
	}
}

9:index.js引入less文件

ipmort('../less/index.less');

10：其他配置接文章 4

11：运行 npm install less --save-dev

   npm -run-build

  npm-run-dev