react-sprite-plugin
本插件的用处在于对html,css,js文件中符合要求的图片进行图集合并以及替换。 符合要求的图片的含义为该图片只是按照原尺寸进行展示,而不涉及拉伸,平铺等其他功能。 符合要求的图片目前需要人为的进行识别,当确定该图片为可图集合并图片后,可将图片名称中加入"_sprite"来进行标识,之后使用该插件即可在webpack打包过程中自动进行图集合并以及url替换。
安装
npm install react-sprite-plugin --save
使用
该插件分为两部分,一部分为webpack插件,一部分为babel插件,配置表如下。
const { resolve } = require("path");
const SpritPlugin = require('react-sprite-plugin');
module.exports = {
entry: resolve(__dirname, "src/index.js"),
output: {
path: resolve(__dirname, "bin"),
filename: "bundle.js",
},
mode: 'development',
module: {
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [SpritPlugin.babelplugin]
}
}
}
]
},
plugins: [
new SpritPlugin.webpackplugin({
imagesPath:"",
htmlUrls: [],
cssFileUrls: [],
})
],
};
webpackplugin参数含义
imagesPath:参数为webpack打包后所生成的img文件夹 htmlUrls:参数为webpack打包后所生成的html文件 cssFileUrls:参数为webpack打包后所生成的css文件