# react17-webpack4-reactRouter5-mobx **Repository Path**: ldoll/react17-webpack4-react-router5-mobx ## Basic Information - **Project Name**: react17-webpack4-reactRouter5-mobx - **Description**: 手动编写框架基础模板 webpack@4 babel@7 react@17 react-router-dom@5 antd@3 其他包含全局less echatrs antd等 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2022-06-24 - **Last Updated**: 2023-11-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, react-admin, webpack ## README https://gitee.com/ldoll/react17-webpack4-react-router5-mobx 参考以下教程 https://www.jianshu.com/p/04e436cf75ba https://github.com/liuboshuo/small-apes-mgr 2022.6.21 手动创建react项目 webpack@4 babel@7 react@17 react-router-dom@5 antd@3 mobx@5 npm init git init cnpm i -S axios cnpm i webpack@4 webpack-dev-server@3 webpack-cli@3 -D // webpack@4 配置用@3 cnpm i html-webpack-plugin@4 -D // 解析html文件 和webpack大版本一致 cnpm i webpack-merge@4 -D // 合并webpack配置 和webpack大版本一致 cnpm i react@17 react-dom@17 -S cnpm i -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 // @7版本 preset-env转换es6语法 cnpm i -D @babel/plugin-transform-runtime@7 @babel/runtime@7 @babel/runtime-corejs2@7 // plugin-transform-runtime转换es6新的语法，这些es5没得的,比如Array.includes() runtime-corejs2用于兼容老ie 新建.babelrc配置文件 cnpm i -D babel-loader // 配置webpack编译babel规则 cnpm i -D style-loader@2 css-loader@5 less less-loader@7 //编译css文件 高版本为了适应webpack@5修改了配置，所以用低版本 cnpm i -D url-loader file-loader // 文件编译 图片字体等 cnpm i -D copy-webpack-plugin@5 // 高版本报错 webpack处理static下静态文件 将单个文件或整个目录复制到构建目录 # eslint-plugin-react-hooks 配置 cnpm i eslint -D cnpm init @eslint/config cnpm i eslint-plugin-react -D cnpm i eslint-plugin-react-hooks -D 配置.eslintrc.js文件 # 按需加载antd cnpm i -S antd@3 // 高版本图标写法不一样 cnpm i -D babel-plugin-import // antd按需加载 配置babel.config.json // antd 按需加载,不需要引入css /views/antd 使用 # router cnpm i -S react-router-dom@5 // 高版本写法不一样 # mobx cnpm i -S mobx@5 mobx-react@6 //mobx6写法不一样，MobX5不支持 E11 cnpm i -D @babel/plugin-proposal-decorators // 配置装饰器 cnpm i -D @babel/eslint-parser // 解决eslint报错 Parsing error: Unexpected character '@'eslint App.js 引入store /src/store 建立仓库文件 /viwes/mobx 使用mobx 修改.eslintrc.js配置 "parser": "@babel/eslint-parser", // 指定解析器 # 引入全局less cnpm i style-resources-loader -D 修改webpack.base.conf.js # mock 见 /mock/README.md 相关文件 /mock /src/views/mock /src/api/user.js /src/store/user # 优化 ## webpack优化 cnpm i -D clean-webpack-plugin // 每次打包清理文件 cnpm i -D webpack-bundle-analyzer //打包完成，可视化查看每个文件大小 修改/build/webpack.prod.conf.js ## react路由的异步加载 cnpm i -S react-loadable /src/utils/loadable.js 修改各个路由组件引入路径 参考/src/views/App.js ## css处理 cnpm i mini-css-extract-plugin@1 -D // css打包到单独的文件 高版本为了适应webpack@5修改了配置，所以用低版本 cnpm i optimize-css-assets-webpack-plugin -D //css压缩 cnpm i -D cssnano@3 // 高版本有问题 4版本也可以，但是3感觉打包的文件更小 修改/build/webpack.prod.conf.js cnpm i postcss-loader@4 autoprefixer -D // 兼容不同浏览器 自动增加前缀 如 -webkit- 修改/build/webpack.base.conf.js package.json 增加 'browserslist' ## js处理 cnpm i -D uglifyjs-webpack-plugin // 压缩js代码 修改/build/webpack.prod.conf.js ## webpack 美化输出内容 cnpm i webpackbar -D # less 取消modules 现在的模块化less都需要less文件名称为XX.module.less 可不可以直接修改为XX.less 然后还是运用模块化啦 目前没找到方案 # 全局路由跳转 目前要跳转的地方都要引用withRouter 不能像vue那样用this.$router就可以全局跳转 # 其他页面刷新页面找不到页面 webpack的 devServer 的host去掉就行了 # SplitChunks 分包优化 # jest # happypack 多线程打包 # mobx-react-router # 多标签keepalive react没得官方的keepalive 可以采用 React Keeper 和 react-router-cache-route # 打包后 访问页面请求资源路径有问题 cnpm i cross-env -D 修改package.json scripts内容设置 NODE_ENV 在webpack配置文件可以获取process.env.NODE_ENV 的值了 修改路由模式为HashRouter # hooks 函数组件 # snoar