雪碧图-webpack

准备工作：node环境已安装，检查node版本

node -v

step1：新建文件夹test，执行npm init，如果想简化操作，可以执行npm init -y

npm init -y  // -y 在init的时候省去了敲回车的步骤，生成的默认的package.json

step2：安装webpack、雪碧图插件webpack-spritesmith

npm install --save-dev webpack webpack-cli webpack-spritesmith

step3：新建文件webpack.config.js

var path=require('path')var Spritesmith=require('webpack-spritesmith')module.exports={    entry:'./index.js',    plugins:[        new Spritesmith({            src:{                cwd: path.resolve(__dirname,'images'), //要执行的图片路径                glob:'*.png'            },            target:{                image:path.resolve(__dirname,'src/sprite.png'), //生成后的图片路径                css:path.resolve(__dirname,'src/sprite.css')            },            apiOptions:{                cssImageRef:'sprite.png'            }        })    ]}

step4：打包

新建index.js // 什么内容都不用写

在package.js新增build命令

{  "name": "package",  "version": "1.0.0",  "description": "雪碧图",  "main": "webpack.config.js",  "scripts": {    "test": "test",    "build": "webpack" //新增  },  "repository": {    "type": "git",    "url": "test"  },  "author": "dx",  "license": "ISC",  "devDependencies": {    "webpack": "^5.70.0",    "webpack-cli": "^4.9.2",    "webpack-spritesmith": "^1.1.0"  }}

打包成功：如下图