feat: 支持路由split

senwii · Nov 25, 2019 · 7e70026 · 7e70026
1 parent 0f68c93
commit 7e70026
Show file tree

Hide file tree

Showing 18 changed files with 1,030 additions and 745 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,13 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react"],
-}
+    "presets": [
+        [
+            "@babel/preset-env", {
+                "targets": {
+                    "browsers": "last 2 Chrome versions",
+                },
+            },
+        ],
+        "@babel/preset-react",
+    ],
+    "plugins": ["@babel/plugin-syntax-dynamic-import"],
+}
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ dist
 yarn.lock
 .vscode
 .DS_Store
+yarn-error.log
diff --git a/README.md b/README.md
@@ -2,3 +2,14 @@
 > react模板项目
 
 ![ci action](https://github.com/senwii/react-template-project/workflows/ci/badge.svg)
+
+
+技术栈：React Hooks + React Router DOM
+
+特性：支持SPA/MPA
+
+SPA页面结构参考`/src/pages/Index/`
+
+新增MPA页面：`/src/pages/`目录下新建一个文件夹即可，参考`/src/pages/Index/`
+
+访问页面：localhost:${port}/${pageFolderName}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,24 +6,28 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "serve": "NODE_ENV=develop webpack-dev-server",
+    "build:develop": "NODE_ENV=develop webpack",
     "build": "NODE_ENV=product webpack"
   },
   "author": "senwii",
   "homepage": "https://senii.github.io/react-template-project",
   "license": "ISC",
   "dependencies": {
-    "dragula": "^3.7.2",
+    "@loadable/component": "^5.10.3",
     "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react-dom": "^16.9.0",
+    "react-router-dom": "^5.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.2.0",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^4.0.0-beta.8",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",

diff --git a/public/index.html b/public/index.html
@@ -3,8 +3,9 @@
 <head>
 	<meta charset="utf-8" />
 	<title><%= title %></title>
+	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
 </head>
 <body>
 	<div id="app"></div>
 </body>
-</html>
+</html>
diff --git a/src/pages/Error/App.js b/src/pages/Error/App.js
@@ -0,0 +1,21 @@
+import React from "react"
+import ReactDOM from 'react-dom'
+
+import './style.less'
+
+import desc from './assets/404_not_found.png'
+
+function App() {
+  return (
+    <div className="root">
+      <div className="desc">
+        <img src={ desc } />
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(
+	<App />,
+	document.getElementById('app'),
+)
diff --git a/src/pages/Error/assets/404_not_found.png b/src/pages/Error/assets/404_not_found.png
diff --git a/src/pages/Error/assets/logo.png b/src/pages/Error/assets/logo.png
diff --git a/src/pages/Error/style.less b/src/pages/Error/style.less
@@ -0,0 +1,28 @@
+html,
+body {
+	height: 100%;
+	margin: 0;
+}
+
+#app {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
+	.root {
+		display: flex;
+		flex: 1;
+		flex-wrap: wrap;
+		flex-direction: column;
+
+		.desc {
+			width: 100%;
+
+			& > img {
+				height: 75px;
+				display: block;
+				margin: 45px 0 0 45px;
+			}
+		}
+	}
+}
diff --git a/src/pages/Index/App.js b/src/pages/Index/App.js
@@ -1,14 +1,35 @@
-import React, { useState, useRef } from 'react'
+import React from "react"
 import ReactDOM from 'react-dom'
+import {
+  BrowserRouter,
+  Switch,
+  Route,
+  Link,
+} from "react-router-dom"
 
 import './style.less'
 
-const App = () => {
-	return (
-		<div className="root">
-      Hello World
+import routes, { basename } from './router'
+
+function App() {
+  return (
+    <div className="root">
+      <BrowserRouter basename={ basename }>
+        <Link to="/hello">Hello</Link>
+        <span style={{ padding: '0 10px', lineHeight: '150px' }}>|</span>
+        <Link to="/about">About</Link>
+          <Switch>
+            {
+              routes.map((route, index) => (
+                <Route path={ route.path } key={ index } render={ props => (
+                  <route.component {...props} routes={route.routes} />
+                )} />
+              ))
+            }
+          </Switch>
+      </BrowserRouter>
     </div>
-	)
+  );
 }
 
 ReactDOM.render(

diff --git a/src/pages/Index/router.js b/src/pages/Index/router.js
@@ -0,0 +1,21 @@
+import loadable from "@loadable/component"
+
+const routes = [
+  {
+    path: '/hello',
+    component: loadable(() => import(/* webpackChunkName: "hello" */ './views/Hello')),
+  },
+  {
+    path: '/about',
+    component: loadable(() => import(/* webpackChunkName: "about" */ './views/About')),
+  }
+]
+
+// set current pageName as base
+const basename = '/Index'
+
+export {
+  basename,
+}
+
+export default routes
diff --git a/src/pages/Index/style.less b/src/pages/Index/style.less
@@ -10,7 +10,7 @@ body {
 	display: flex;
 
 	.root {
-		display: flex;
 		flex: 1;
+		text-align: center;
 	}
 }
diff --git a/src/pages/Index/views/About.js b/src/pages/Index/views/About.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function About() {
+  return (
+    <div>This is the <b>About</b> sub page view.</div>
+  )
+}
diff --git a/src/pages/Index/views/Hello.js b/src/pages/Index/views/Hello.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Hello() {
+  return (
+    <div>Hello World.</div>
+  )
+}
diff --git a/webpack/webpack.base.js b/webpack/webpack.base.js
@@ -6,6 +6,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 const appDirName = process.cwd()
 
+process.env.OUTPUT_DIR = 'dist'
+
 // 入口+HTML模板配置
 function getEntries() {
 	const entry = {}
@@ -20,7 +22,7 @@ function getEntries() {
 				templateParameters: {
 					title: dirName,
 				},
-				filename: `${dirName.toLowerCase()}/index.html`,
+				filename: `${dirName}/index.html`,
 				template: `${appDirName}/public/index.html`,
 			})
 		)
@@ -36,19 +38,25 @@ const  { entry, htmlWebpackPluginList } = getEntries()
 
 module.exports = {
 	entry,
-	// output: {
-	// 	path: __dirname + '/dist',
-  //   filename: '[name]/app.[hash].js',
-  //   publicPath: 'https://senwii.github.io/react-template-project',
-	// },
 	devServer: {
-		contentBase: `${appDirName}/dist`,
+    contentBase: `${appDirName}/${process.env.OUTPUT_DIR}`,
+    // host: '172.23.62.60',
 		compress: true,
 		historyApiFallback: {
 			rewrites: [
-				{ from: /^\/$/, to: '/index\/index.html' },
+        {
+          from: /\/([\s\S]+)\//,
+          to({ parsedUrl }) {
+            const pageName = parsedUrl.href.split('/')[1] || ''
+            if (Object.keys(entry).find(name => name === pageName) !== undefined) {
+              return `/${pageName}`
+            } else {
+              return '/'
+            }
+          }
+        },
 			],
-		},
+    },
   },
   resolve: {
     alias: {
@@ -60,9 +68,9 @@ module.exports = {
 		splitChunks: {
 			cacheGroups: {
 				vendor: {
-					test: /node_modules\/(react|react-dom)/,
-					filename: 'vendor.[hash].js',
-					chunks: 'all',
+					test: /node_modules\/(react|react-dom|react-router-dom)\//,
+          name: 'vendor',
+          chunks: 'all',
 				},
 			},
 		},
@@ -82,16 +90,30 @@ module.exports = {
 					'postcss-loader',
 					'less-loader',
 				],
+      },
+      {
+        test: /\.(png|svg|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[contenthash].[ext]',
+          outputPath: '/assets/',
+        },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: [
+          'file-loader',
+        ],
       },
 		],
 	},
 	plugins: [
 		...htmlWebpackPluginList,
 		new CleanWebpackPlugin(),
 		new MiniCssExtractPlugin({
-			filename: '[name]/main.[hash].css',
-			chunkFilename: '[name]/[id].[hash].css',
+			filename: '[name]/main.[contenthash].css',
+			chunkFilename: '[name]/[id].[contenthash].css',
 			ignoreOrder: true,
-		}),
+    }),
 	]
 }
diff --git a/webpack/webpack.dev.js b/webpack/webpack.dev.js
@@ -3,7 +3,9 @@ const appDirName = process.cwd()
 module.exports = {
   mode: 'development',
 	output: {
-		path: `${appDirName}/dist`,
-    filename: '[name]/app.[hash].js',
+    path: `${appDirName}/${process.env.OUTPUT_DIR}`,
+    filename: '[name]/app.[contenthash].js',
+    chunkFilename: 'chunks/[name].[contenthash].js',
+    publicPath: '/',
 	},
 }
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js
@@ -3,8 +3,9 @@ const appDirName = process.cwd()
 module.exports = {
   mode: 'production',
 	output: {
-		path: `${appDirName}/dist`,
-    filename: '[name]/app.[hash].js',
+		path: `${appDirName}/${process.env.OUTPUT_DIR}`,
+    filename: '[name]/app.[contenthash].js',
+    chunkFilename: 'chunks/[name].[contenthash].js',
     publicPath: 'https://senwii.github.io/react-template-project',
 	},
 }