Изображение WebPack WordPress, подчеркивающее папку загрузки - PullRequest
0 голосов
/ 22 января 2020

У меня есть собственная тема 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'
                    }
                })
            ])
        ]
    }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...