У меня есть собственная тема WP, однако блог (за исключением некоторых стилей) является стандартным. Моя проблема в том, что когда люди добавляют изображения в блог, который они загружают через WP CMS, а изображения go в папку загрузки.
У меня есть настройка веб-пакета в моей теме, и я оптимизирую изображения в своей теме с помощью плагина imagemin https://www.npmjs.com/package/imagemin-webpack
проблема в том, что он работает только с изображениями в моей теме, как я могу развернуть, чтобы оптимизировать все изображения в папке загрузки в WP?
Мой веб-пакет
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractWebpackPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const NonJsEntryCleanupPlugin = require('./non-js-entry-cleanup-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const {context, entry, devtool, outputFolder, publicFolder} = require('./config');
const HMR = require('./hmr');
const getPublicPath = require('./publicPath');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
module.exports = (options) => {
const {dev} = options;
const hmr = HMR.getClient();
return {
mode: dev ? 'development' : 'production',
devtool: dev ? devtool : false,
context: path.resolve(context),
entry: {
'styles/main': dev ? [hmr, entry.styles] : entry.styles,
'scripts/main': dev ? [hmr, entry.scripts] : entry.scripts,
},
output: {
path: path.resolve(outputFolder),
publicPath: getPublicPath(publicFolder),
filename: '[name].[Chunkhash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)\/(?!(dom7|ssr-window|swiper)\/).*/,
use: [
...(dev ? [{loader: 'cache-loader'}] : []),
{loader: 'babel-loader'}
]
},
{
test: /\.(sa|sc|c)ss$/,
use: [
...(dev ? [{loader: 'cache-loader'}, {
loader: 'style-loader',
options: {sourceMap: dev}
}] : [MiniCssExtractWebpackPlugin.loader]),
{loader: 'css-loader', options: {sourceMap: dev}},
{
loader: 'postcss-loader', options: {
ident: 'postcss',
sourceMap: dev,
config: {ctx: {dev}}
}
},
{loader: 'resolve-url-loader', options: {sourceMap: dev}},
{loader: 'sass-loader', options: {sourceMap: true, sourceMapContents: dev}},
]
},
{
test: /\.(png|jpg|jpe?g|gif|ico|mp4|webm)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'image/[name].[ext]',
}
}
]
},
{
test: /\.(svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'svg/[name].[ext]',
},
},
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeTitle: true },
{ convertColors: { shorthex: false } },
{ convertPathData: false },
],
},
},
]
},
{
test: /\.(ttf|otf|eot|woff2?)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
}
}
]
}
]
},
plugins: [
...(dev ? [
new FriendlyErrorsWebpackPlugin()
] : [
new MiniCssExtractWebpackPlugin({
filename: '[name].[Chunkhash].css'
}),
new NonJsEntryCleanupPlugin({
context: 'styles',
extensions: 'js',
includeSubfolders: true
}),
new CleanWebpackPlugin([
path.resolve(outputFolder)
], {
allowExternal: true,
beforeEmit: true
}),
new CopyWebpackPlugin([
{
from: path.resolve(`${context}/**/*`),
to: path.resolve(outputFolder),
}
], {
ignore: ['*.js', '*.ts', '*.scss', '*.css']
}),
new ImageminPlugin({
test: /\.(jpe?g|png|gif)$/i,
cacheFolder: './imgcache',
pngquant: {
quality: '95-100'
}
})
])
]
}
};