如何阻止wp-scripts构建时删除自定义Gutenberg区块的优化图片

1. 配置wp-scripts排除特定目录不被清理 #

你之前的问题在于重复添加了CleanWebpackPlugin，而wp-scripts已经内置了该插件，新增实例会和默认配置冲突。正确做法是修改内置插件的排除规则：

创建自定义Webpack配置文件（比如webpack.config.js）：

const defaultConfig = require("@wordpress/scripts/config/webpack.config");

module.exports = {
  ...defaultConfig,
  plugins: defaultConfig.plugins.map(plugin => {
    // 定位到内置的CleanWebpackPlugin实例
    if (plugin.constructor.name === 'CleanWebpackPlugin') {
      return new plugin.constructor({
        cleanOnceBeforeBuildPatterns: [
          '**/*',
          // 排除所有block下的assets/images目录及文件
          '!**/assets/images/**',
          '!**/assets/images'
        ],
      });
    }
    return plugin;
  }),
};

确保wp-scripts加载这个配置：在package.json的脚本中添加--config webpack.config.js参数，比如：

"scripts": {
  "build": "wp-scripts build --config webpack.config.js --webpack-copy-php && npm run build:css && npm run process-images",
  "start": "wp-scripts start --config webpack.config.js --webpack-copy-php && npm run watch:css && npm run process-images"
}

这个配置会让Webpack清理build目录时，跳过所有{block-name}/assets/images路径下的文件和目录。

2. 其他集成图片优化流程的方案 #

如果修改Webpack配置仍不生效，可以尝试以下两种更稳定的方式：

方案A：利用npm post钩子在构建后生成图片 #

将图片优化脚本放在构建完成后执行，避免被Webpack的清理步骤影响：

修改package.json的脚本：

"scripts": {
  "build": "wp-scripts build --webpack-copy-php && npm run build:css",
  // 构建完成后自动执行图片优化
  "postbuild": "npm run process-images",
  "start": "wp-scripts start --webpack-copy-php && npm run watch:css && npm run watch:images",
  // 监听源图片变化，自动重新优化
  "watch:images": "chokidar 'src/**/*.{jpg,jpeg,png}' -c 'npm run process-images'",
  // ...其他脚本
}

需要先安装依赖：

npm install chokidar-cli --save-dev

方案B：通过CopyWebpackPlugin将图片纳入构建流程 #

1. 修改process-images.js，将优化后的图片输出到临时目录（比如tmp），而不是直接输出到build：

const sharp = require('sharp');
const fs = require('fs-extra');
const path = require('path');

const srcRoot = path.resolve(__dirname, '../src');
const tmpRoot = path.resolve(__dirname, '../tmp');

async function processImages() {
  // 遍历所有block目录
  const blocks = await fs.readdir(srcRoot);
  for (const block of blocks) {
    const srcImgDir = path.join(srcRoot, block, 'assets', 'images');
    if (await fs.pathExists(srcImgDir)) {
      const tmpImgDir = path.join(tmpRoot, block, 'assets', 'images');
      await fs.ensureDir(tmpImgDir);
      
      const images = await fs.readdir(srcImgDir);
      for (const img of images) {
        if (/\.(jpg|jpeg|png)$/i.test(img)) {
          const imgPath = path.join(srcImgDir, img);
          const outputPath = path.join(tmpImgDir, `${path.parse(img).name}.webp`);
          await sharp(imgPath).webp({ quality: 80 }).toFile(outputPath);
        }
      }
    }
  }
}

processImages().catch(err => console.error(err));

2. 修改Webpack配置，添加CopyWebpackPlugin将临时目录的图片复制到build：

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  ...defaultConfig,
  plugins: [
    ...defaultConfig.plugins,
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'tmp'),
          to: '[path][name].[ext]',
        },
      ],
    }),
  ],
};

3. 调整package.json脚本，先处理图片再构建：

"scripts": {
  "build": "npm run process-images && wp-scripts build --config webpack.config.js --webpack-copy-php && npm run build:css",
  // ...其他脚本
}

这种方式会让Webpack将优化后的图片视为构建产物的一部分，不会被清理。

内容的提问来源于stack exchange，提问作者dev_freeman_12