webpack5基于React+Antd搭建开发和生产环境

追逐梦想之路_随笔

已于 2022-10-01 22:17:49 修改

阅读量776

点赞数

分类专栏： react 自动化构建工具文章标签： react.js javascript webpack

于 2022-10-01 22:10:15 首次发布

本文链接：https://blog.csdn.net/qq_44472790/article/details/127138067

版权

本文介绍了如何使用Webpack5结合React和Antd，配置开发和生产环境。主要内容包括package.json中插件版本与启动命令、浏览器兼容性设置，以及.babelrc.js、.eslintrc.js的配置。此外，详细阐述了config目录下webpack.base.js、webpack.dev.js和webpack.prod.js的配置用途，确保项目的开发和生产环境顺畅运行。

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

主要涉及目录说明：
package.json 所使用插件版本和启动命令/浏览器兼容版本
babel.config.js 处理语法兼容
.eslintrc.js 开启eslint检测
config目录包含：
webpack.base.js 基础公共环境配置项
webpack.dev.js 开发环境配置项
webpack.prod.js 生产环境配置项

package.json文件和配置项

{
  "name": "react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "babel-loader": "^8.2.5",
    "babel-preset-react-app": "^10.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.1.0",
    "eslint": "^8.24.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.2.0",
    "html-webpack-plugin": "^5.5.0",
    "image-minimizer-webpack-plugin": "^3.6.1",
    "imagemin": "^8.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.2",
    "react-refresh": "^0.14.0",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.6",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1",