Question

我正在使用image-webpack-loader优化图像。当我的Webpack模式为options.disable = true时，我想通过development禁用它。现在，我正在尝试从process.env.NODE_ENV获取模式，但无法正常工作。

这是我的webpack配置的一部分：

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;
};

我通过webpack --mode=production和webpack --mode= development运行我的配置

Answer 1

这将不起作用，因为Webpack仅在构建期间设置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)

如何获取通过标志设置的Webpack模式值？

1 个答案: