Webpack4+React16+ReactRouter4整合开发
这次分享的内容有部分是跟之前的文章【webpack4手动配置安装react开发】大概类似,不同的是这次我们要结合reactr-router进行开发
1、 创建项目并安装
1 | mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter |
1 | npm init -y |
1 | npm install react react-dom prop-types react-router-dom |
1 | npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev |
- react开发需要用到的
- babel相关的是用来做es5/es6语法解析的
- eslint相关的是用来做语言检查的
2、eslint和webpack相关配置
.eslintrc
1 | { |
webpack.config.js
1 | const path = require('path'); |
index.html
1 |
|
基本上整个目录结构就搭建完了。还是蛮繁琐的,但是自己了解了其中整个逻辑及流程,对自己是有意的,不过说不好未来就成体系了,直接调用就好了,比如现在的create-react-app,可以直接帮你创建一个项目,很不错的一个选择。
但是搭建一个符合自己需求的更有价值。
基本的都弄完了,接下来如何使用ReactRouter呢,先从入口文件开始
src/index.jsx
1 | import React from 'react'; |
基本上整个实例是参考了官网的实例,只是针对自己的需求做局部的调整,对于需要使用React开发的同学完全可以入手了,关于数据相关的后面再继续讨论。
这里有个很重要的点,就是在使用webpack-dev-server的使用,当你跳转到某个路由的时候,再刷新会发现页面提示找不到,这个问题这里介绍一个解决方案
historyApiFallback
只需要在webpack.config.js中配置下
1 | historyApiFallback: { |
最终的文件结构如下
1 | const path = require('path'); |
在运行npm start,修改代码试试,这里强调下版本,如果你的版本比我的新的话,要自己去看下官网的api是否有调整
实例环境,拉取github代码,看package.json,一切尽在你掌握之中
实例项目地址:
https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.0