Comments (4)
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.
{
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.
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.
thank you so much
from tinypng-webpack-plugin.
Related Issues (3)
- 在mpvue下使用报错 HOT 4
- 添加对已压缩图片不进行重复压缩的功能 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tinypng-webpack-plugin.