You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

webpack-image-resize-plugin

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-image-resize-plugin - npm Package Compare versions

Comparing version

0.0.4
to
0.1.0

example/src/assets/images/hero.webp

52

example/src/pages/Home/Home.jsx

@@ -8,3 +8,3 @@ import React from "react";

import heroImage from "../../assets/images/hero.png"
import heroImage from "../../assets/images/hero.webp";
import trendingGif from "../../assets/images/trending.gif";

@@ -16,27 +16,29 @@ import findGif from "../../assets/images/find.gif";

const Home = () => {
return (
<>
<NavBar />
<section className={styles.heroSection}>
<img className={styles.heroImage} src={heroImage} alt="hero" />
<div className={styles.projectTitle}>
<h1 className={styles.title}>Memegle</h1>
<h3 className={styles.subtitle}>gif search engine for you</h3>
</div>
<Link to="/search"><button className={styles.cta}>start search</button></Link>
</section>
<section className={styles.featureSection}>
<div className={styles.featureSectionWrapper}>
<h2 className={styles.featureTitle}>Features</h2>
<div className={styles.featureItemContainer}>
<FeatureItem title="See trending gif" imageSrc={trendingGif} />
<FeatureItem title="Find gif for free" imageSrc={findGif} />
</div>
</div>
</section>
<Footer />
</>
);
return (
<>
<NavBar />
<section className={styles.heroSection}>
<img className={styles.heroImage} src={heroImage} alt="hero" />
<div className={styles.projectTitle}>
<h1 className={styles.title}>Memegle</h1>
<h3 className={styles.subtitle}>gif search engine for you</h3>
</div>
<Link to="/search">
<button className={styles.cta}>start search</button>
</Link>
</section>
<section className={styles.featureSection}>
<div className={styles.featureSectionWrapper}>
<h2 className={styles.featureTitle}>Features</h2>
<div className={styles.featureItemContainer}>
<FeatureItem title="See trending gif" imageSrc={trendingGif} />
<FeatureItem title="Find gif for free" imageSrc={findGif} />
</div>
</div>
</section>
<Footer />
</>
);
};
export default Home;
export default Home;

18

example/webpack.config.js

@@ -5,3 +5,4 @@ const path = require("path");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const WebpConvertPlugin = require("../src");
const ImageResizePlugin = require("../src/index.js");
const { webpack } = require("webpack");

@@ -30,5 +31,12 @@ module.exports = {

new Dotenv(),
new WebpConvertPlugin({
width: 200,
height: 200,
new ImageResizePlugin({
gifInfo: {
width: 100,
height: 100,
},
imgInfo: {
width: 1920,
height: 1080,
quality: 100,
},
}),

@@ -50,3 +58,3 @@ ],

{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|webp)$/i,
loader: "file-loader",

@@ -53,0 +61,0 @@ options: {

5

package.json
{
"name": "webpack-image-resize-plugin",
"version": "0.0.4",
"version": "0.1.0",
"main": "src/index.js",

@@ -23,3 +23,4 @@ "description": "Webpack plugin to resize image assets",

"dependencies": {
"sharp": "^0.29.0"
"imagemin": "^7.0.1",
"imagemin-webp": "^6.0.0"
},

@@ -26,0 +27,0 @@ "devDependencies": {

83

src/index.js

@@ -1,14 +0,13 @@

const sharp = require("sharp");
const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");
const PLUGIN_NAME = "WebpConvertPlugin";
const IMAGES_POSTFIX = /\.(jpe?g|png|gif|webp)/;
const PLUGIN_NAME = "ImageResizePlugin";
const IMAGES_POSTFIX = /\.(jpe?g|png|webp)/;
const GIF_POSTFIX = /\.(gif)/;
class WebpConvertPlugin {
constructor({ width, height }) {
if (typeof width !== "number" || typeof height !== "number") {
throw new Error("width, height must be number.");
}
this.width = width;
this.height = height;
class ImageResizePlugin {
constructor({ outputPath = "dist", gifInfo, imgInfo }) {
this.gifInfo = gifInfo || { width: 1920, height: 1080 };
this.imgInfo = imgInfo || { width: 1920, height: 1080, quality: 75 };
this.outputPath = outputPath;
}

@@ -26,33 +25,49 @@

const processedSharpToAssetFileAsyncs = assetFileNames.map(
const processImageminForAssetFileAsyncs = assetFileNames.map(
(assetFileName) => {
if (!IMAGES_POSTFIX.test(assetFileName)) return;
if (GIF_POSTFIX.test(assetFileName)) {
console.info("This Plugin is not support [gif] format.");
console.info(
`Please run this command => gifsicle --resize ${this.gifInfo.width}x${this.gifInfo.height} ./${this.outputPath}/${assetFileName} -o ./${this.outputPath}/${assetFileName}`
);
} else if (IMAGES_POSTFIX.test(assetFileName)) {
const removedPostFixName = assetFileName
.split(".")
.slice(0, -1)
.join(".");
const convertedFileName = `${removedPostFixName}.webp`;
const assetFile = compilation.assets[assetFileName];
const assetFile = compilation.assets[assetFileName];
const processedSharpToAssetFileAsync = sharp(assetFile.source())
.resize(this.width, this.height)
const processImageminAsync = imagemin
.buffer(assetFile.source(), {
plugins: [
imageminWebp({
quality: this.imgInfo.quality,
size: 200,
resize: {
width: this.imgInfo.width,
height: this.imgInfo.height,
},
}),
],
})
.then((processedBuffer) => {
delete compilation.assets[assetFileName];
.toBuffer()
.then((buffer) => {
const size = (assetFile.size() - buffer.length) / 1024;
delete compilation.assets[assetFileName];
compilation.emitAsset(assetFileName, {
source: () => buffer,
size: () => buffer.length,
compilation.emitAsset(convertedFileName, {
source: () => processedBuffer,
size: () => processedBuffer.length,
});
})
.catch((error) => {
console.error(error);
});
return size;
})
.catch((error) => {
console.error(error);
});
return processedSharpToAssetFileAsync;
return processImageminAsync;
}
}
);
Promise.allSettled(processedSharpToAssetFileAsyncs).then(() => {
Promise.allSettled(processImageminForAssetFileAsyncs).then(() => {
callback();

@@ -66,2 +81,2 @@ });

module.exports = WebpConvertPlugin;
module.exports = ImageResizePlugin;
example/src/assets/images/hero.png