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

谁借莪１个温暖的怀抱￠ 2021-12-16 23:05 206阅读 0赞

## 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
    				}
    			}]
    		}]
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关打包压缩

压缩文件后缀名（了解）压缩包工具 .zip zip压缩工具 .bz2 bzip2压缩工具，只

小鱼儿/ 2023年08月17日 17:06/ 0 赞/ 138 阅读

相关 Linux压缩打包

使用tar命令打包压缩成后缀名为.tar.gz的压缩包压缩 tar -zcvf 压缩包名被压缩目录例如我要压缩当前目录下的queue目录，我

冷不防/ 2022年12月21日 14:56/ 0 赞/ 152 阅读

相关 css精灵图如何取图

css精灵技术：将网页中的一些背景图像整合到一张大图中，减少请求服务器的次数。精灵图的使用： ![在这里插入图片描述][watermark_type_ZmFuZ3po

比眉伴天荒/ 2022年10月25日 11:29/ 0 赞/ 205 阅读

相关 Mapbox Sprite精灵图生成

出处：[ATtuing - 博客园][ATtuing -] ，[https://www.cnblogs.com/ATtuing/p/9273391.html][https_ww

矫情吗；*/ 2022年08月28日 04:53/ 0 赞/ 401 阅读

相关精灵图设定

加个<s></s> 设定s的css样式为：. XXXX s \{ display:inline-block; background:url( ) X坐标值

骑猪看日落/ 2022年07月19日 02:11/ 0 赞/ 99 阅读

相关 unity 读取精灵图Sprite

在ＵＩj界面搭建时，通过Unity自带的工具将一张图片切成许多小图在代码里读取一个图片下的N个小图片废话不多说，上代码 private sprite\[\] emo

迷南。/ 2022年06月14日 09:10/ 0 赞/ 346 阅读

相关 css精灵图(雪碧图)切图

css精灵图为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图雪碧图切图简单过程：先在ps中打开，然后通过用矩形覆盖原来图标在图片中的位

深碍√TFBOYSˉ_/ 2022年05月20日 09:56/ 0 赞/ 459 阅读

相关制作精灵图 glue 的安装使用（安装过程存在的问题）

帧动画是很多张图片的切换，依赖人眼的视觉残留效应实现动画的效果；一般情况下设计会给到很多的图片，这个时候，作为前端需要把这些图片合成一张图片，然后改变图片的位置，显示相

缺乏、安全感/ 2022年02月01日 00:51/ 0 赞/ 208 阅读

相关 css中的精灵图

先不说什么是精灵图，先看一个网页中的例子 ![20190626155845605.PNG][] 这些文字前面的小图标，可能有些人会认为这些小图标是好几张图片，我们通过检

我会带着你远行/ 2021年12月24日 00:31/ 0 赞/ 237 阅读

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

webpack的运用 const webpack = require('webpack'); const htmlWebpackPlugin = requ

谁借莪１个温暖的怀抱￠/ 2021年12月16日 23:05/ 0 赞/ 207 阅读