Как получить значение режима webpack, установленное флагом?

Question

Я использую image-webpack-loader для оптимизации изображений. Я хочу отключить его через options.disable = true, когда мой режим веб-пакета development. Теперь я пытаюсь получить режим из process.env.NODE_ENV, но он не работает.

Вот часть моей конфигурации веб-пакета:

const config = {
  entry: './src/entry.js',
  output: {
    filename: 'script.js',
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|webp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: process.env.NODE_ENV === 'development',
            }
          },
        ],
      },
    ],
  },
}


module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
    config.mode = 'development';
  } else {
    config.mode = 'production';
  }

  return config;
};

Я запускаю свое conifg через webpack --mode=production иwebpack --mode= development

Answer 1

Это не будет работать, поскольку веб-пакет устанавливает только NODE_ENV во время сборки. Если вы хотите, чтобы это было установлено при загрузке конфигурации, вы должны установить его при запуске сборки в командной строке. Но лучший вариант для вас - превратить конфиг в функцию

const config = mode => ({
  entry: './src/entry.js',
  output: {
    filename: 'script.js',
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|webp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: mode === 'development',
            }
          },
        ],
      },
    ],
  },
  devtool: mode === 'development' ? 'source-map' : undefined,
  mode
})


module.exports = (env, argv) => config(argv.mode)