Блог

Главная - Вопросы по программированию - Плагин Craco не загружается

Плагин Craco не загружается

#reactjs #webpack #craco

Вопрос:

Я пытаюсь добавить этот плагин, который использует этот плагин webpack, в мой конфигурационный файл 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
        },
      },
    ],
  };
};

Плагин должен оптимизировать изображения, но этого не происходит. Есть какие-нибудь идеи? Что-то не так с моим файлом конфигурации? Спасибо.

Комментарии:

1. Является ли общий файл таким craco.config.js ?

2. Да, это тот самый файл

3. пожалуйста, поделитесь командой, которую вы используете для сборки.

4. а также добавить ваш package.json файл

5. Я использую «сборку craco» для сборки. И это версии: «@craco/craco»: «^6.1.2», «плагин craco-оптимизатора изображений»: «^0.0.4»,

Ответ №1:

Похоже, это была проблема с реактивными сценариями. Пришлось добавить плагин вручную, вот так:

 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 amp;amp;
        m.loader.test amp;amp;
        (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;
  },
};

А затем импортируйте файл вместо пакета.

Метки: