react craco webpack 如何获取.env变量

在React项目中使用Craco和Webpack配置环境变量通常涉及到使用`dotenv`库来加载`.env`文件。首先，你需要安装必要的依赖：

npm install --save-dev dotenv

然后，在你的项目的根目录下创建一个`.env`文件，用于存放环境变量，例如：

REACT_APP_API_URL=https://your-api.com

接下来，需要在Craco的配置文件`craco.config.js`中设置`dotenv`插件。添加以下内容：

const { create } = require('craco');
const Dotenv = require('craco-dotenv');

module.exports = create({
  plugins: [
    {
      plugin: Dotenv,
      options: {
        // 如果你的.env文件不在根目录，可以指定路径
        // path: './path/to/.env',
        // 或者启用仅在开发环境中加载
        // onlyInDevelopment: true,
      },
    },
  ],
});

现在，在你的React应用中，你可以通过`process.env.REACT_APP_API_URL`访问`.env`文件中的环境变量。记住，这只有在运行开发服务器时才会生效。

如果你在生产构建中需要使用环境变量，可以在Webpack配置里配置`DefinePlugin`：

// 在webpack.config.js或其他适当的配置文件中
module.exports = {
  // ...其他配置...
  optimization: {
    runtimeChunk: 'single', // 将runtime提取到单独的chunk
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // 这里的键应匹配你在.env文件中的变量名
        'API_URL': JSON.stringify(process.env.REACT_APP_API_URL),
      },
    }),
  ],
};

这样，无论在开发还是生产环境下，都可以通过`API_URL`常量访问你的环境变量。