weepack打包，压缩，制作精灵图

webpack的运用

const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const imageminWebpackPlugin = require('imagemin-webpack-plugin').default;
const webpackSpritesmith = require('webpack-spritesmith');


module.exports = {
//入口和输出的两个配置字段
	//入口是指定需要被打包的一些文件
	entry:{
		bundle_test:__dirname+'/js/test.js'       //js文件也可以不打包在一起也是允许的
	},
	output:{    //最终输出的目录位置
		path:__dirname+'/dist',     //保存的目录  可以是不存在的目录  不存在就会新建一个目录出来
		filename:'[name].js'     //文件的名称  name分别是   入口中相对应的  key值
	},
	//打包模式 在这里改变打包模式的参数
	//devtool:'eval'
	devtool:'source-map',
	plugins:[
	       //使用相应的  压缩打包 的内置插件   前提要先设置devtool  为 source-map
	      new webpack.optimize.UglifyjsPlugin({
	      	   sourceMap:true,        //是否支持生成sourceMap文件
	      	   ie8:true    //是否支持ie8浏览器
	      }),
	      //html的打包的插件的使用    webpack会自行将打包好的js导入到html文件当中
	      new htmlWebpackPlugin({
	      	template:__dirname+'/index.html',     //文件来源的路径
	      	filename:__dirname+'/dist/index2.html'     //打包生成的目录
	      }),
	      //先复制图片  再 做压缩的操作  复制图片的时候  先是数组 里面再添加 对象
	      new copyWebpackPlugin([{
	      	from:__dirname+'/img',
	      	to:'./img'     //to的路径 默认就是 在文件输出的位置
	      }]),
	      //压缩图片
	      new imageminWebpackPlugin({
	      	disable:true,   //是否开启压缩
	      	test:/\.(jpe?g|png|gif|svg)$/i,
	      	pngquant:{    //压缩的比例 
	      		quality:'10-80'     //压缩的比例  10  是想要压缩的目标值 80原来图片的值
	      	},
	      	optipng:{
	      		optimizationLevel:6    //优先级别
	      	}
	      }),
	      //制作精灵图
	      new webpackSpritesmith({
	      	src:{       //想要被制作为精灵图的目标路径和文件格式
	      		cwd:__dirname+'/img',
	      		glob:'*.png'   //匹配相应的图片格式
	      	},
	      	target:{     //制作的精灵图存放的位置
	      		image:__dirname+'/dist/img/s.png',   //精灵图的的位置
	      		css:__dirname+'/dist/css/s.css'
	      	},
	      	apiOptions:{   // 样式文件中调用雪碧图地址写法
	      		cssImageRef:'../img/s.png'
	      	},
	      	spritesmithOptions:{    // 图标的排序算法
	      		algorithm:'top-down'
	      	}
	      })
	
	],
	module:{
		rules:[{
			test:/\.css$/,    //css的文件的解析规则
			//当我们有多种规则都同时存在的时候  可以用!分割开来
			//解析顺序是从后往前
			loader:'style-loader!css-loader'
		},{
			test:/\.(png|jpg|jpeg|gif)$/,
			use:[{
				loader:'url-loader',       //使用url-loader
				options:{
					limit:10000   //遇到小于等于10000B的图片进行转化为base64代码，直接载入html
				}
			}]
		}]
	}
}