renboen / tinyimg-webpack-plugin

A webpack plugin for compressing image

Tinyimg Webpack Plugin

tinyimg-webpack-plugin是一个压缩图像的Webpack扩展器，提供JPG和PNG的压缩功能

安装

npm i tinyimg-webpack-plugin

安装准备

• 提前安装webpack和webpack-cli：npm i webpack webpack-cli
• 必须依赖webpack 4.0.0以上和webpack-cli 3.0.0以上

安装失败

• 切换NPM镜像为淘宝镜像：npm config set registry https://registry.npm.taobao.org/
• 重新执行安装命令：npm i tinyimg-webpack-plugin

使用

配置	功能	格式	描述
enabled	是否启用插件	true/false	建议只在生产环境下开启
logged	是否打印日志	true/false	打印压缩图像相关信息

在webpack.config.js或webpack配置插入以下代码。

CommonJS

const TinyimgPlugin = require("tinyimg-webpack-plugin");

module.exports = {
    plugins: [
        new TinyimgPlugin({
            enabled: process.env.NODE_ENV === "production",
            logged: true
        })
    ]
};

ESM

必须在babel加持下的Node环境中使用

import TinyimgPlugin from "tinyimg-webpack-plugin";

export default {
    plugins: [
        new TinyimgPlugin({
            enabled: process.env.NODE_ENV === "production",
            logged: true
        })
    ]
};

版权

MIT © Joway Young

后记

若觉得tinyimg-webpack-plugin对你有帮助，可在Issue上提出你的宝贵建议，笔者会认真阅读并整合你的建议。喜欢tinyimg-webpack-plugin的请给一个Star，或Fork本项目到自己的Github上，根据自身需求定制功能。

关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔