按创建react应用程序的条件添加craco webpack插件

Question

我正在使用craco与创建反应应用程序，我想添加一个插件只在开发模式或环境变量

我的craco.config外观是：

const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = () => {
  return {
    webpack: {
      alias: {
        environment: path.join(
          __dirname,
          'src',
          'environments',
          process.env.CLIENT_ENV || 'production'
        )
      }
      //   plugins: [new BundleAnalyzerPlugin()]
    },
    jest: {
      configure: {
        testPathIgnorePatterns: ['<rootDir>/src/environments/'],
        moduleNameMapper: {
          environment: '<rootDir>/src/environments/test'
        }
      }
    }
  };
};

所以我想要这个BundleAnalyzerPlugin。仅当ENV参数x =true或NODE_ENV=test时

当我尝试推送插件数组时，我得到了未定义的插件

module.exports.webpack.plugins.push(plugin)

Answer 1

您可以在任何脚本命令之前设置环境变量。例如，在package.json中，在设置某些变量的scripts段落中添加新行：

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "analyzer": "env NODE_ENV=production ANALYZER=test yarn start"
 }

在craco.config.js中，您可以简单地使用：

 plugins: process.env.ANALYZER === 'test' ? [new BundleAnalyzerPlugin()] : []

现在，运行npm run analyzer，将node env设置为production，将变量ANALYZER设置为test (稍后使用)，并加载craco配置，这将启动webpack服务器和分析器。