如何通过 webpack 4 压缩图片
How to compress images via webpack 4
我需要像 TinyPNG 一样压缩图像并将压缩图像保存在 dist 文件夹中。
我用的是webpack 4,发现imagemin-webpack.But 不明白有什么用:plugin还是loader?
请帮助完成此任务的配置。
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let {imageminLoader} = require("imagemin-webpack");
let imageminGifsicle = require("imagemin-gifsicle");
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'main.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: "file-loader"
},
{
loader: imageminLoader,
options: {
cache: true,
bail: false,
imageminOptions: {
plugins: [imageminGifsicle()]
},
name: "[hash]-compressed.[ext]"
}
}
]
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
这是我的配置文件。 运行 生成命令后图像没有任何反应。
为了在 Webpack 4 中压缩图像,我使用“img-loader”。
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
{
loader: 'file-loader',
options: {
name: '' + imgPath + '[name].[ext]'
}
},
{
loader: 'img-loader',
options: {
plugins: [
imageminGifsicle({
interlaced: false
}),
imageminMozjpeg({
progressive: true,
arithmetic: false
}),
imageminPngquant({
floyd: 0.5,
speed: 2
}),
imageminSvgo({
plugins: [
{ removeTitle: true },
{ convertPathData: false }
]
})
]
}
}
]
}
当然,这些是必需的变量:
const imgPath = './assets/img/';
const imageminGifsicle = require("imagemin-gifsicle");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");
const imageminMozjpeg = require('imagemin-mozjpeg');
我需要像 TinyPNG 一样压缩图像并将压缩图像保存在 dist 文件夹中。 我用的是webpack 4,发现imagemin-webpack.But 不明白有什么用:plugin还是loader? 请帮助完成此任务的配置。
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let {imageminLoader} = require("imagemin-webpack");
let imageminGifsicle = require("imagemin-gifsicle");
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'main.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: "file-loader"
},
{
loader: imageminLoader,
options: {
cache: true,
bail: false,
imageminOptions: {
plugins: [imageminGifsicle()]
},
name: "[hash]-compressed.[ext]"
}
}
]
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
这是我的配置文件。 运行 生成命令后图像没有任何反应。
为了在 Webpack 4 中压缩图像,我使用“img-loader”。
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
{
loader: 'file-loader',
options: {
name: '' + imgPath + '[name].[ext]'
}
},
{
loader: 'img-loader',
options: {
plugins: [
imageminGifsicle({
interlaced: false
}),
imageminMozjpeg({
progressive: true,
arithmetic: false
}),
imageminPngquant({
floyd: 0.5,
speed: 2
}),
imageminSvgo({
plugins: [
{ removeTitle: true },
{ convertPathData: false }
]
})
]
}
}
]
}
当然,这些是必需的变量:
const imgPath = './assets/img/';
const imageminGifsicle = require("imagemin-gifsicle");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");
const imageminMozjpeg = require('imagemin-mozjpeg');