按条件添加 craco webpack 插件以创建反应应用程序答案

【问题标题】：Add craco webpack plugin by condition for create react app按条件添加 craco webpack 插件以创建反应应用程序
【发布时间】：2020-05-02 17:20:38
【问题描述】：

我正在使用 craco 创建 react 应用程序，我想仅在 DEV 模式下或通过 ENV Var 添加插件

我的 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)

【问题讨论】：

标签： javascript reactjs webpack create-react-app craco

【解决方案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 服务器和分析仪。

【讨论】：

【解决方案2】：

您可以使用 craco 中的条件，例如 when、whenDev、whenProd、whenTest

 webpack: {
    plugins: [...whenDev(() => [new BundleAnalyzerPlugin()], [])]
},

【讨论】：