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文件