webpack打包react项目发布到Tomcat下

最新推荐文章于 2024-09-02 14:11:27 发布

逆风飞翔的猿

最新推荐文章于 2024-09-02 14:11:27 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack打包 react项目部署 Tomcat

本文链接：https://blog.youkuaiyun.com/chenqk_123/article/details/103567290

前阶段做react项目，项目的架构使用create-react-app去创建的项目，技术选型react4+antd，来构建项目。在开发阶段基本上是在本地进行的测试，在package.json中配置的代理，这样就可以在本地调试服务器上的接口，接口已经对接成功，现在到了要发布测试了，不能在本地搞了，就选择使用webpack打包工具，将项目进行打包，然后丢到Tomcat下就能运行。理想是美好的，现实是残酷的。

兴致满满的将项目打包，丢到Tomcat下居然是404,。一看到404就能猜出是路径的问题。由于之前没有处理过这种发布的问题，所以有点慌。有点不知所措，于是上网搜索了一下，再结合项目的具体环境，调试了一通，最后努力是没有白费，成功了，所以在这里也给大家分享一下具体实现。

先看一下项目的结构目录：

这是一个完整的项目配置，在我们使用脚手架创建项目的时候，执行

npm init

就会生成一一个基本的react项目结构，在里面可以增加自己的模块，我所有的代码都放到了src下，是只有一个主页面index.html的，其他的全部是js文件和css文件，根据不同的模块划分不同的js。

package.json文件中的配置

下面是一个完整的package.json配置(这里是我项目中用到的依赖)，这里没什么好说的，主要是在项目初始化的时候会写进去script属性，在我们打包项目的时候就会用到 build命令。

{
  "name": "react-router-history",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://192.168.20.217:8082",
  "dependencies": {
    "@uiw/react-codemirror": "^1.0.28",
    "antd": "^3.21.2",
    "axios": "^0.19.0",
    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.15-beta.0",
    "events": "^3.0.0",
    "intl": "^1.2.5",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "qs": "^6.9.1",
    "react": "^16.9.0",
    "react-bootstrap": "^1.0.0-beta.11",
    "react-cookies": "^0.1.1",
    "react-dom": "^16.9.0",
    "react-emit": "^2.1.0",
    "react-intl": "^3.4.0",
    "react-intl-universal": "^2.2.1",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "3.0.1",
    "redux-saga": "^1.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "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-plugin-jsx-control-statements": "^4.0.0",
    "css-loader": "^3.2.0",
    "jsx-control-statemen