Javascript 网页包WordPress图像下划线上载文件夹

Javascript 网页包WordPress图像下划线上载文件夹,javascript,wordpress,image,optimization,webpack,Javascript,Wordpress,Image,Optimization,Webpack,我有一个定制的WP主题,但是博客(除了一些样式)是标准的。 我的问题是,当人们将图片添加到他们通过WP CMS上传的博客中时,图片会进入上传文件夹 我在我的主题中设置了web包,并使用imagemin插件优化主题中的图像 问题是它只在我的主题内的图像上运行,我如何扩展以优化WP中上载文件夹中的所有图像 我的网页 const path = require('path'); const webpack = require('webpack'); const MiniCssExtractWebpack

我有一个定制的WP主题,但是博客(除了一些样式)是标准的。 我的问题是,当人们将图片添加到他们通过WP CMS上传的博客中时,图片会进入上传文件夹

我在我的主题中设置了web包,并使用imagemin插件优化主题中的图像

问题是它只在我的主题内的图像上运行,我如何扩展以优化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'
                    }
                })
            ])
        ]
    }
};

有几种方法,你可以安装wordpress插件,或者使用命令行nodejs,当然,如果你有权访问服务器的话。例如,在wordpress中,或者在名为wp smushit的节点库中,perfect我会研究一下,谢谢