skyujilong/tinypng-webpack-plugin

a tinyPNG plugin for webpack

tinypng-webpack-plugin

a img compress plugin use with tinyPNG for webpack.

Get TinyPNG key

link

Installation

# for webpack 4
$ npm install tinypng-webpack-plugin --save-dev

# for webpack 3 & 2 & 1
$ npm install [email protected] --save-dev

Example Webpack Config

var tinyPngWebpackPlugin = require('tinypng-webpack-plugin');

    //in your webpack plugins array
    module.exports = {
      plugins: [
          new tinyPngWebpackPlugin({
              key:"your tinyPNG key"
          })
      ]
    }

Usage

new tinyPngWebpackPlugin({
    key:"your tinyPNG key",//can be Array, eg:['your key 1','your key 2'....]
    ext: ['png', 'jpeg', 'jpg'],//img ext name
    proxy:'http://user:[email protected]:8080'//http proxy,eg:如果你来自**，同时拥有shadowsocks，翻墙默认配置为 http:127.0.0.1:1080 即可。（注，该参数因为需要超时断开连接的原因，导致最后会延迟执行一会webpack。但相对于国内网络环境，用此参数还是非常划算的，测试原有两张图片，无此参数耗时2000ms+，有此参数耗时1000ms+节约近半。）
})

Options Description

• key: Required, tinyPNG key
• ext: not Required, to be compress img ext name.
• proxy：not Required, a http proxy to improve the network environment.eg:http://127.0.0.1:1080

Defaults Options

    {
        key:'',
        ext: ['png', 'jpeg', 'jpg'],
        proxy:''
    }

License

http://www.opensource.org/licenses/mit-license.php

tinypng-webpack-plugin's Issues

添加对已压缩图片不进行重复压缩的功能

如果只是使用tinyPng的免费额度。每次打包都压缩一遍文件会导致免费额度很快用完，最好能添加一个对已压缩图片不进行重复压缩的功能。

在mpvue下使用报错

`png-webpack-plugin/index.js:35
compiler.hooks.emit.tapPromise(this.pluginName,(compilation)=>{
^

TypeError: Cannot read property 'emit' of undefined`

You may need an appropriate loader to handle this file type.

.........compress img start.........
一共需压缩 29 张图片
Hash: 92e6f4c5ecc43fc1e382
Version: webpack 2.2.0-rc.0
Time: 3124ms
    Asset     Size  Chunks             Chunk Names
bundle.js  8.64 kB       0  [emitted]  main
   [0] ./lang.js 338 bytes {0} [built]
   [1] ./css/style.css 900 bytes {0} [built] [failed] [1 error]
   [2] ./common.js 4.62 kB {0} [built]
   [3] ./img/arrow.png 219 bytes [built] [failed] [1 error]
   [4] ./img/black_arrow_down.png 230 bytes [built] [failed] [1 error]
   [5] ./img/check.png 219 bytes [built] [failed] [1 error]
   [6] ./img/office.jpg 220 bytes [built] [failed] [1 error]
    + 2 hidden modules

ERROR in ./img/black_arrow_down.png
Module parse failed: C:\master\web\TripBaku\img\black_arrow_down.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./css/style.css 7:4488-4526
 @ ./lang.js
 @ ./common.js

ERROR in ./img/check.png
Module parse failed: C:\master\web\TripBaku\img\check.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./css/style.css 7:9133-9160
 @ ./lang.js
 @ ./common.js

ERROR in ./img/office.jpg
Module parse failed: C:\master\web\TripBaku\img\office.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./css/style.css 7:410-438
 @ ./lang.js
 @ ./common.js

ERROR in ./img/arrow.png
Module parse failed: C:\master\web\TripBaku\img\arrow.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./css/style.css 7:16374-16401
 @ ./lang.js
 @ ./common.js

ERROR in ./css/style.css
Module build failed: ModuleParseError: Module parse failed: C:\master\web\TripBaku\img\office.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at C:\master\web\TripBaku\node_modules\webpack\lib\NormalModule.js:207:34
    at C:\master\web\TripBaku\node_modules\webpack\lib\NormalModule.js:164:10
    at C:\master\web\TripBaku\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\master\web\TripBaku\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at C:\master\web\TripBaku\node_modules\loader-runner\lib\LoaderRunner.js:202:4
    at C:\master\web\TripBaku\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
    at process._tickCallback (internal/process/next_tick.js:150:11)

ERROR in C:\master\web\TripBaku\node_modules\extract-text-webpack-plugin\loader.js?{"omit":0,"remove":true,"options":{"minimize":true}}!C:\master\web\TripBaku\node_modules\css-loader\index.js!C:\master\web\TripBaku\css\style.css doesn't export content
Child extract-text-webpack-plugin:
       [0] ./img/arrow.png 219 bytes {0} [built] [failed] [1 error]
       [1] ./img/black_arrow_down.png 230 bytes {0} [built] [failed] [1 error]
       [2] ./img/check.png 219 bytes {0} [built] [failed] [1 error]
       [3] ./img/office.jpg 220 bytes {0} [built] [failed] [1 error]
       [6] ./~/css-loader!./css/style.css 18.7 kB {0} [built]
        + 2 hidden modules

    ERROR in ./img/office.jpg
    Module parse failed: C:\master\web\TripBaku\img\office.jpg Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./css/style.css 7:410-438

    ERROR in ./img/black_arrow_down.png
    Module parse failed: C:\master\web\TripBaku\img\black_arrow_down.png Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./css/style.css 7:4488-4526

    ERROR in ./img/check.png
    Module parse failed: C:\master\web\TripBaku\img\check.png Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./css/style.css 7:9133-9160

    ERROR in ./img/arrow.png
    Module parse failed: C:\master\web\TripBaku\img\arrow.png Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./css/style.css 7:16374-16401
2
Unhandled rejection TypeError: Assignment to constant variable.
    at C:\master\web\TripBaku\node_modules\webpack-tinypng-compress\index.js:101:53
    at tryCatcher (C:\master\web\TripBaku\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\master\web\TripBaku\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (C:\master\web\TripBaku\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (C:\master\web\TripBaku\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (C:\master\web\TripBaku\node_modules\bluebird\js\release\promise.js:689:18)
    at Async._drainQueue (C:\master\web\TripBaku\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (C:\master\web\TripBaku\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\master\web\TripBaku\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:756:18)
    at tryOnImmediate (timers.js:717:5)
    at processImmediate [as _immediateCallback] (timers.js:697:5)

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Acer\AppData\Roaming\npm-cache\_logs\2018-02-26T17_46_55_360Z-debug.log

C:\master\web\TripBaku>

Here's my webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");
const tinypngCompress = require("webpack-tinypng-compress");

const config = {
	entry: "./common.js",
	output: {
		path: path.resolve(__dirname, "dist"),
		filename:"bundle.js",
		publicPath:"dist/"
	},
	// performance: {
	// 	maxEntrypointSize:400000
	// },
	module: {
		rules: [
			{
				use:"babel-loader",
				test: /\.js$/,
			},
			{
				loader:ExtractTextPlugin.extract({
					loader:"css-loader",
					options: {minimize:true}
				}),
				test: /\.css$/,
			},
			// {
			// 	test: /\.(jpe?g|png|gif|svg)$/,
			// 	use: [
			// 		{
			// 			loader:"url-loader",
			// 			options:{ limit:40000, name:"[name].[ext]" }
			// 		},
			// 		"image-webpack-loader"
			// 	]
			// }
		]
	}, 
	plugins: [
		new ExtractTextPlugin("style.css"),
		new tinypngCompress({
			key:"yout tinyPNG key",
			ext:["png","jpeg","jpg"],
			relativePath:path.resolve(__dirname,"img")
		})
	]
};
if (NODE_ENV == "production") {
	config.plugins.push(
		new webpack.optimize.UglifyJsPlugin({
			compress:{
				warnings:false,
				drop_console:true,
				unsafe:true
			}
		})
	);
}
module.exports = config;

Already 3 days can't solve this issue please help me.