Git Product home page Git Product logo

Comments (4)

skyujilong avatar skyujilong commented on July 20, 2024 1

please use url-loader to resolve this problem, because you need a loader to process image file.
if you don't want to generate base64, please set options limit:1 or 0 or use file-loader.

from tinypng-webpack-plugin.

skyujilong avatar skyujilong commented on July 20, 2024 1
			{
			 	test: /\.(jpe?g|png|gif|svg)$/,
			 	use: [
			 		{
			 			loader:"url-loader",
			 			options:{ limit:1000, name:"[name].[ext]" }
			 		},
			 		"image-webpack-loader"
			 	]
			 }

limit options change to lower, you set too hight.
you need to know, that loader only handle file type, tinypng-webpack-plugin is only compress your imgs, it don't handle file type.

from tinypng-webpack-plugin.

DuudeXX8 avatar DuudeXX8 commented on July 20, 2024

Thanks but when i remove tinypngplugin from plugins and use url-loader i got this type warning :(

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  office.jpg (291 kB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

I don't use this image how i can do that to don't get that warning.When i comment my options in url-loader i'll get error that my css file size is to big.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  style.css (448 kB)

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"
when this line is commented i got warning that my css file size is to big if i uncomment this line i got warning that a image size is to big						// options:{ limit:40000, name:"[name].[ext]" }  
					},
					"image-webpack-loader"
				]
			}
		]
	}, 
	plugins: [
		new ExtractTextPlugin("style.css"),
	]
};
if (NODE_ENV == "production") {
	config.plugins.push(
		new webpack.optimize.UglifyJsPlugin({
			compress:{
				warnings:false,
				drop_console:true,
				unsafe:true
			}
		})
	);
}
module.exports = config;

from tinypng-webpack-plugin.

DuudeXX8 avatar DuudeXX8 commented on July 20, 2024

thank you so much

from tinypng-webpack-plugin.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.