React+webpack+env的环境配置

最新推荐文章于 2024-08-16 09:06:09 发布

acgCode

最新推荐文章于 2024-08-16 09:06:09 发布

阅读量1.6k

点赞数

分类专栏：前端 # JavaScript # React 文章标签： react.js

本文链接：https://blog.csdn.net/sayuonly/article/details/119990895

版权

本文介绍了如何在React项目中结合Webpack和.env文件进行环境配置。重点讲述了安装必要的插件，如dotenv和dotenv-webpack，以及如何在Webpack配置中引入这些插件来读取.env文件中的环境变量。通过设置package.json的脚本，可以方便地切换和使用不同环境的配置。

摘要由CSDN通过智能技术生成

之前我总结过使用react-scripts如何通过env进行环境配置（原文），但是我们在打包的时候常用的是webpack。所以我针对webpack总结了一下如何使用env进行环境配置。

安装

首先我们需要安装相应的插件，我将我的package.json放在下面了，大家按需安装吧。

{
   
  "name": "react-remplate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
   
    "@babel/polyfill": "^7.12.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
   
    "start": "dotenv -e .env.development webpack-dev-server",
    "backserver": "dotenv -e .env.backserver webpack-dev-server",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
   
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
   
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
   
    "@babel/cli": "^7.14.8"