reactjs - Craco 插件未加载

Question

我正在尝试添加 this插件，它使用 this webpack plugin到我的 craco 配置文件，按照指南进行操作，但它不起作用。

const CracoAlias = require('craco-alias');
const imageOptimizer = require('craco-image-optimizer-plugin');
module.exports = function ({ env }) {
  return {
    reactScriptsVersion: 'react-scripts',
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('postcss-focus-visible'),
          require('autoprefixer'),
        ],
      },
    },
    plugins: [
      {
        plugin: imageOptimizer,
        // image-webpack-plugin options
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65,
          },
          // optipng.enabled: false will disable optipng
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: [0.65, 0.9],
            speed: 4,
          },
          gifsicle: {
            interlaced: false,
          },
          // the webp option will enable WEBP
          webp: {
            quality: 75,
          },
        },
      },
      {
        plugin: CracoAlias,
        options: {
          //CracoAlias options
        },
      },
    ],
  };
};

该插件应该优化图像，但它并没有发生。有任何想法吗？是我的配置文件有问题吗？谢谢。

Answer 1

似乎是 react 脚本的问题。必须像这样手动添加插件:

const { getLoaders, loaderByName } = require('@craco/craco');
module.exports = {
  overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions }) => {
    const config = { ...webpackConfig };
    const urlLoaderCandidates = getLoaders(config, loaderByName('url-loader'));
    const urlLoader = urlLoaderCandidates.matches.find(
      m =>
        m.loader &&
        m.loader.test &&
        (Array.isArray(m.loader.test)
          ? m.loader.test.some(r => r.toString().indexOf('jpe?g') >= 0)
          : m.loader.test.toString().indexOf('jpe?g') >= 0)
    );
    if (!urlLoader) {
      throw Error(
        'could not find correct url-loader. did you change react-scripts version?'
      );
    }
    const loader = urlLoader.loader;
    loader.use = [
      {
        loader: loader.loader,
        options: Object.assign({}, loader.options),
      },
      {
        /**
         * @see https://github.com/tcoopman/image-webpack-loader
         */
        loader: 'image-webpack-loader',
        options: pluginOptions,
      },
    ];
    delete loader.loader;
    delete loader.options;
    return config;
  },
};

然后导入文件而不是包。