update webpack config, add page use redux.

weizhiqimail · weizhiqimail · commit b72042eb84b3 · 2021-02-23T10:37:42.000+08:00
diff --git a/.env b/.env
@@ -1 +0,0 @@
-REACT_APP_NAME=SHERRY
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@babel/preset-env": "^7.12.17",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.12.17",
+    "@types/chalk": "^2.2.0",
     "@types/classnames": "^2.2.11",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
@@ -48,6 +49,7 @@
     "autoprefixer": "^10.2.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
+    "chalk": "^4.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.0.2",
@@ -66,7 +68,7 @@
     "prettier": "^2.2.1",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.1.5",
+    "typescript": "4.1.3",
     "webpack": "^5.23.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>react</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 
diff --git a/scripts/helper.js b/scripts/helper.js
@@ -1,17 +1,19 @@
 const fs = require('fs');
 const path = require('path');
+const os = require('os');
 const dotenv = require('dotenv');
 
 const NODE_ENV = process.env.NODE_ENV;
-const REACT_APP_REGEXP = /^REACT_APP_/i;
-
-if (!NODE_ENV) {
-  throw new Error('必须指定 NODE_ENV');
-}
 
 const rootPath = path.resolve(__dirname, '..');
 
 function getProcessEnv() {
+  const REACT_APP_REGEXP = /^REACT_APP_/i;
+
+  if (!NODE_ENV) {
+    throw new Error('必须指定 NODE_ENV');
+  }
+
   const result = {};
 
   const dotenvFiles = [
@@ -31,7 +33,9 @@ function getProcessEnv() {
       });
     }
   });
+
   result.NODE_ENV = NODE_ENV;
+
   return result;
 }
 
@@ -49,10 +53,23 @@ function processSize(size) {
   };
 }
 
-
+function getLocalIP() {
+  const interfaces = os.networkInterfaces();
+  for (let devName in interfaces) {
+    if (interfaces.hasOwnProperty(devName)) {
+      let iface = interfaces[devName];
+      for (let i = 0; i < iface.length; i++) {
+        let alias = iface[i];
+        if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+          return alias.address;
+        }
+      }
+    }
+  }
+}
 
 module.exports = {
   getProcessEnv,
   processSize,
+  getLocalIP,
 };
-
diff --git a/scripts/plugins/PackingGenerateFilePlugin.js b/scripts/plugins/PackingGenerateFilePlugin.js
@@ -7,7 +7,7 @@ class PackingGenerateFilePlugin {
       let contentList = [];
       // statObj.size() 的单位是 bit
       Object.entries(assets).forEach(([filename, statObj]) => {
-        const { size, unit } = helper.processSize(statObj.size())
+        const { size, unit } = helper.processSize(statObj.size());
         contentList.push({filename, size: `${size}${unit}` });
       });
       console.table(contentList);
diff --git a/scripts/webpack.config.dev.js b/scripts/webpack.config.dev.js
@@ -1,26 +1,36 @@
 const path = require('path');
+const webpack = require('webpack');
 const {merge} = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+const chalk = require('chalk');
 
 const baseConfig = require('./webpack.config');
 const pkg = require('../package.json');
+const helper = require('./helper');
+
+const defaultConfig = {
+  port: process.env.REACT_APP_PORT || 18000
+};
 
 module.exports = merge(baseConfig, {
   mode: 'development',
+
   devtool: 'source-map',
+
   devServer: {
-    port: 18000,
+    port: defaultConfig.port,
     hot: true,
     compress: true,
-    transportMode: 'ws',
+    clientLogLevel: 'silent',
     contentBase: path.resolve(__dirname, '../public'),
     historyApiFallback: {
       index: path.resolve(__dirname, '../public/index.html'),
       disableDotRule: true,
     },
-    before(app, server) {
-
+    after(app, server) {
+      console.log(chalk.green(`❤  ${pkg.name} server startup successfully, please visit...`));
+      console.log(chalk.green(`❤  http://localhost:${defaultConfig.port}`));
+      console.log(chalk.green(`❤  http://${helper.getLocalIP()}:${defaultConfig.port}`));
     }
   },
 
diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js
@@ -36,7 +36,7 @@ module.exports = {
     new webpack.EnvironmentPlugin(envObj),
   ],
 
-  stats: 'errors-only',
+  stats: 'minimal',
 
 };
 
diff --git a/src/assets/images/avatar.jpg b/src/assets/images/avatar.jpg
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,9 @@
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.png';
+declare module '*.gif';
+declare module '*.svg';
+declare module '*.bmp';
+declare module '*.ttf';
+declare module '*.woff';
+declare module '*.woff2';
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,13 +9,7 @@ import history from '@/store/history';
 import store from '@/store';
 import '@/assets/style/global.less';
 
-function Home() {
-	return (
-		<div>
-      home page
-		</div>
-	);
-}
+const Home = React.lazy(() => import('@/pages/home/index'));
 
 ReactDOM.render(
 	<Provider store={store}>
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
@@ -0,0 +1,4 @@
+img.avatar {
+  width: 100px;
+  height: 100px;
+}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+import {RootState} from '@/store/reducers';
+import {HomeState} from '@/store/reducers/home';
+import {HomeProps} from '@/pages/home/types';
+import homeActions from '@/store/actions/home';
+import './index.less';
+
+import avatar from '@/assets/images/avatar.jpg';
+
+function Home(props: HomeProps) {
+	return (
+		<div>
+			<h3>Home Page</h3>
+			<p><img className="avatar" src={avatar} alt=""/></p>
+			<p>
+				<b>{props.counter}</b>
+				<button onClick={() => props.setCounter(props.counter + 1)}>add counter</button>
+			</p>
+		</div>
+	);
+}
+
+export const mapStateToProps = (state: RootState): HomeState => state.home;
+
+export default connect(mapStateToProps, homeActions)(Home);
diff --git a/src/pages/home/types.ts b/src/pages/home/types.ts
@@ -0,0 +1,11 @@
+import {PropsWithChildren} from 'react';
+import {RouteComponentProps} from 'react-router-dom';
+
+import {mapStateToProps} from '@/pages/Home/index';
+import homeActions from '@/store/actions/home';
+
+export type IStateProps = ReturnType<typeof mapStateToProps>;
+
+export type IDispatchProps = typeof homeActions;
+
+export type HomeProps = PropsWithChildren<RouteComponentProps> & IStateProps & IDispatchProps;
diff --git a/src/store/actionType.ts b/src/store/actionType.ts
@@ -1,2 +1,2 @@
-
+export const HOME_COUNTER = 'HOME_COUNTER';
 
diff --git a/src/store/actions/home.ts b/src/store/actions/home.ts
@@ -0,0 +1,13 @@
+import {AnyAction} from 'redux';
+
+import * as TYPES from '../actionType';
+
+const homeActions = {
+	setCounter(payload: number): AnyAction {
+		return {type: TYPES.HOME_COUNTER, payload};
+	}
+};
+
+export default homeActions;
+
+
diff --git a/src/store/history.ts b/src/store/history.ts
@@ -1,5 +1,5 @@
-import {createHashHistory} from 'history';
+import {createBrowserHistory} from 'history';
 
-const history = createHashHistory();
+const history = createBrowserHistory();
 
 export default history;
diff --git a/src/store/reducers/home.ts b/src/store/reducers/home.ts
@@ -0,0 +1,22 @@
+
+import {AnyAction} from 'redux';
+
+import * as TYPES from '../actionType';
+
+export interface HomeState {
+  counter: number;
+}
+
+const initialState: HomeState = {
+	counter: 0,
+};
+
+export default function homeReducer(state = initialState, action: AnyAction): HomeState {
+	switch (action.type) {
+	case TYPES.HOME_COUNTER:
+		return { ...state, counter: action.payload };
+	default:
+		return state;
+	}
+}
+
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
@@ -2,9 +2,11 @@ import {combineReducers, ReducersMapObject, Reducer} from 'redux';
 import {connectRouter} from 'connected-react-router';
 
 import history from '@/store/history';
+import homeReducer from '@/store/reducers/home';
 
 const reducers: ReducersMapObject = {
 	router: connectRouter(history),
+	home: homeReducer,
 };
 
 type RootState = {
diff --git a/yarn.lock b/yarn.lock
@@ -990,6 +990,13 @@
   resolved "https://registry.npm.taobao.org/@types/anymatch/download/@types/anymatch-1.3.1.tgz?cache=0&sync_timestamp=1613378060592&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fanymatch%2Fdownload%2F%40types%2Fanymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha1-M2utwb7sudrMOL6izzKt9ieoQho=
 
+"@types/chalk@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.npm.taobao.org/@types/chalk/download/@types/chalk-2.2.0.tgz#b7f6e446f4511029ee8e3f43075fb5b73fbaa0ba"
+  integrity sha1-t/bkRvRRECnujj9DB1+1tz+6oLo=
+  dependencies:
+    chalk "*"
+
 "@types/classnames@^2.2.11":
   version "2.2.11"
   resolved "https://registry.npm.taobao.org/@types/classnames/download/@types/classnames-2.2.11.tgz?cache=0&sync_timestamp=1613378322977&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fclassnames%2Fdownload%2F%40types%2Fclassnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
@@ -1879,6 +1886,14 @@ caniuse-lite@^1.0.30001181:
   resolved "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001190.tgz?cache=0&sync_timestamp=1613799292999&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001190.tgz#acc6d4a53c68be16cfc314d55c9cab637e558cba"
   integrity sha1-rMbUpTxovhbPwxTVXJyrY35VjLo=
 
+chalk@*, chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha1-ThSHCmGNni7dl92DRf2dncMVZGo=
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1888,14 +1903,6 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha1-ThSHCmGNni7dl92DRf2dncMVZGo=
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.npm.taobao.org/chokidar/download/chokidar-2.1.8.tgz?cache=0&sync_timestamp=1610719440699&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
