ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upgrade dependencies, replace img-loader with image-minimizer-webpack-plugin

Browse Source
This commit is contained in:
Alice Gaudon 2021-06-07 11:21:43 +02:00
parent efbc895ba3
commit 7e260ebde2
2 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -39,20 +39,20 @@
"eslint": "^7.10.0",
"feather-icons": "^4.28.0",
"file-loader": "^6.0.0",
"imagemin": "^7.0.0",
"image-minimizer-webpack-plugin": "^2.2.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^9.0.0",
"img-loader": "^3.0.1",
"jest": "^26.1.0",
"jest": "^27.0.4",
"maildev": "^1.1.0",
"mini-css-extract-plugin": "^1.2.1",
"nodemon": "^2.0.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"sass-loader": "^12.0.0",
"svgo": "^2.3.0",
"terser-webpack-plugin": "^5.0.3",
"ts-jest": "^26.1.1",
"ts-jest": "^27.0.3",
"ts-loader": "^9.1.0",
"typescript": "^4.0.2",
"webpack": "^5.3.2",

48
webpack.config.js
View File

@ -1,5 +1,7 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const { extendDefaultPlugins } = require("svgo");
const TerserPlugin = require('terser-webpack-plugin');
const dev = process.env.NODE_ENV === 'development';
@ -62,19 +64,8 @@ const config = {
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
'file-loader?name=../img/[name].[ext]',
{
loader: 'img-loader',
options: {
enabled: !dev,
plugins: [
require('imagemin-gifsicle')({}),
require('imagemin-mozjpeg')({}),
require('imagemin-pngquant')({}),
require('imagemin-svgo')({}),
]
}
}
]
],
type: 'asset',
}
],
},
@ -85,6 +76,35 @@ const config = {
new MiniCssExtractPlugin({
filename: '../css/[name].css',
}),
new ImageMinimizerPlugin({
minimizerOptions: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", {}],
["mozjpeg", {}],
["pngquant", {}],
// Svgo configuration here https://github.com/svg/svgo#configuration
[
"svgo",
{
plugins: extendDefaultPlugins([
{
name: "removeViewBox",
active: false,
},
{
name: "addAttributesToSVGElement",
params: {
attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
},
},
]),
},
],
],
},
}),
]
};
@ -97,4 +117,4 @@ if (!dev) {
};
}
module.exports = config;
module.exports = config;