Skip to content

Commit b72042e

Browse files
weizhiqimailweizhiqimail
committed
update webpack config, add page use redux.
1 parent 129e615 commit b72042e

19 files changed

+154
-35
lines changed

‎.env

-1
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
REACT_APP_NAME=SHERRY

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@babel/preset-env": "^7.12.17",
3636
"@babel/preset-react": "^7.12.13",
3737
"@babel/preset-typescript": "^7.12.17",
38+
"@types/chalk": "^2.2.0",
3839
"@types/classnames": "^2.2.11",
3940
"@types/react": "^17.0.2",
4041
"@types/react-dom": "^17.0.1",
@@ -48,6 +49,7 @@
4849
"autoprefixer": "^10.2.4",
4950
"babel-loader": "^8.2.2",
5051
"babel-plugin-import": "^1.13.3",
52+
"chalk": "^4.1.0",
5153
"clean-webpack-plugin": "^3.0.0",
5254
"cross-env": "^7.0.3",
5355
"css-loader": "^5.0.2",
@@ -66,7 +68,7 @@
6668
"prettier": "^2.2.1",
6769
"style-loader": "^2.0.0",
6870
"terser-webpack-plugin": "^5.1.1",
69-
"typescript": "^4.1.5",
71+
"typescript": "4.1.3",
7072
"webpack": "^5.23.0",
7173
"webpack-cli": "^4.5.0",
7274
"webpack-dev-server": "^3.11.2",

‎public/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>react</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title><%= htmlWebpackPlugin.options.title %></title>
68
</head>
79
<body>
810

‎scripts/helper.js

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
const fs = require('fs');
22
const path = require('path');
3+
const os = require('os');
34
const dotenv = require('dotenv');
45

56
const NODE_ENV = process.env.NODE_ENV;
6-
const REACT_APP_REGEXP = /^REACT_APP_/i;
7-
8-
if (!NODE_ENV) {
9-
throw new Error('必须指定 NODE_ENV');
10-
}
117

128
const rootPath = path.resolve(__dirname, '..');
139

1410
function getProcessEnv() {
11+
const REACT_APP_REGEXP = /^REACT_APP_/i;
12+
13+
if (!NODE_ENV) {
14+
throw new Error('必须指定 NODE_ENV');
15+
}
16+
1517
const result = {};
1618

1719
const dotenvFiles = [
@@ -31,7 +33,9 @@ function getProcessEnv() {
3133
});
3234
}
3335
});
36+
3437
result.NODE_ENV = NODE_ENV;
38+
3539
return result;
3640
}
3741

@@ -49,10 +53,23 @@ function processSize(size) {
4953
};
5054
}
5155

52-
56+
function getLocalIP() {
57+
const interfaces = os.networkInterfaces();
58+
for (let devName in interfaces) {
59+
if (interfaces.hasOwnProperty(devName)) {
60+
let iface = interfaces[devName];
61+
for (let i = 0; i < iface.length; i++) {
62+
let alias = iface[i];
63+
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
64+
return alias.address;
65+
}
66+
}
67+
}
68+
}
69+
}
5370

5471
module.exports = {
5572
getProcessEnv,
5673
processSize,
74+
getLocalIP,
5775
};
58-

‎scripts/plugins/PackingGenerateFilePlugin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class PackingGenerateFilePlugin {
77
let contentList = [];
88
// statObj.size() 的单位是 bit
99
Object.entries(assets).forEach(([filename, statObj]) => {
10-
const { size, unit } = helper.processSize(statObj.size())
10+
const { size, unit } = helper.processSize(statObj.size());
1111
contentList.push({filename, size: `${size}${unit}` });
1212
});
1313
console.table(contentList);

‎scripts/webpack.config.dev.js

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
const path = require('path');
2+
const webpack = require('webpack');
23
const {merge} = require('webpack-merge');
34
const HtmlWebpackPlugin = require('html-webpack-plugin');
4-
const webpack = require('webpack');
5+
const chalk = require('chalk');
56

67
const baseConfig = require('./webpack.config');
78
const pkg = require('../package.json');
9+
const helper = require('./helper');
10+
11+
const defaultConfig = {
12+
port: process.env.REACT_APP_PORT || 18000
13+
};
814

915
module.exports = merge(baseConfig, {
1016
mode: 'development',
17+
1118
devtool: 'source-map',
19+
1220
devServer: {
13-
port: 18000,
21+
port: defaultConfig.port,
1422
hot: true,
1523
compress: true,
16-
transportMode: 'ws',
24+
clientLogLevel: 'silent',
1725
contentBase: path.resolve(__dirname, '../public'),
1826
historyApiFallback: {
1927
index: path.resolve(__dirname, '../public/index.html'),
2028
disableDotRule: true,
2129
},
22-
before(app, server) {
23-
30+
after(app, server) {
31+
console.log(chalk.green(`❤ ${pkg.name} server startup successfully, please visit...`));
32+
console.log(chalk.green(`❤ http://localhost:${defaultConfig.port}`));
33+
console.log(chalk.green(`❤ http://${helper.getLocalIP()}:${defaultConfig.port}`));
2434
}
2535
},
2636

‎scripts/webpack.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = {
3636
new webpack.EnvironmentPlugin(envObj),
3737
],
3838

39-
stats: 'errors-only',
39+
stats: 'minimal',
4040

4141
};
4242

‎src/assets/images/avatar.jpg

30.9 KB
Loading

‎src/global.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module '*.jpg';
2+
declare module '*.jpeg';
3+
declare module '*.png';
4+
declare module '*.gif';
5+
declare module '*.svg';
6+
declare module '*.bmp';
7+
declare module '*.ttf';
8+
declare module '*.woff';
9+
declare module '*.woff2';

‎src/index.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,7 @@ import history from '@/store/history';
99
import store from '@/store';
1010
import '@/assets/style/global.less';
1111

12-
function Home() {
13-
return (
14-
<div>
15-
home page
16-
</div>
17-
);
18-
}
12+
const Home = React.lazy(() => import('@/pages/home/index'));
1913

2014
ReactDOM.render(
2115
<Provider store={store}>

‎src/pages/home/index.less

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
img.avatar {
2+
width: 100px;
3+
height: 100px;
4+
}

‎src/pages/home/index.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import {connect} from 'react-redux';
3+
4+
import {RootState} from '@/store/reducers';
5+
import {HomeState} from '@/store/reducers/home';
6+
import {HomeProps} from '@/pages/home/types';
7+
import homeActions from '@/store/actions/home';
8+
import './index.less';
9+
10+
import avatar from '@/assets/images/avatar.jpg';
11+
12+
function Home(props: HomeProps) {
13+
return (
14+
<div>
15+
<h3>Home Page</h3>
16+
<p><img className="avatar" src={avatar} alt=""/></p>
17+
<p>
18+
<b>{props.counter}</b>
19+
<button onClick={() => props.setCounter(props.counter + 1)}>add counter</button>
20+
</p>
21+
</div>
22+
);
23+
}
24+
25+
export const mapStateToProps = (state: RootState): HomeState => state.home;
26+
27+
export default connect(mapStateToProps, homeActions)(Home);

‎src/pages/home/types.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {PropsWithChildren} from 'react';
2+
import {RouteComponentProps} from 'react-router-dom';
3+
4+
import {mapStateToProps} from '@/pages/Home/index';
5+
import homeActions from '@/store/actions/home';
6+
7+
export type IStateProps = ReturnType<typeof mapStateToProps>;
8+
9+
export type IDispatchProps = typeof homeActions;
10+
11+
export type HomeProps = PropsWithChildren<RouteComponentProps> & IStateProps & IDispatchProps;

‎src/store/actionType.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
1+
export const HOME_COUNTER = 'HOME_COUNTER';
22

‎src/store/actions/home.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {AnyAction} from 'redux';
2+
3+
import * as TYPES from '../actionType';
4+
5+
const homeActions = {
6+
setCounter(payload: number): AnyAction {
7+
return {type: TYPES.HOME_COUNTER, payload};
8+
}
9+
};
10+
11+
export default homeActions;
12+
13+

‎src/store/history.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {createHashHistory} from 'history';
1+
import {createBrowserHistory} from 'history';
22

3-
const history = createHashHistory();
3+
const history = createBrowserHistory();
44

55
export default history;

‎src/store/reducers/home.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import {AnyAction} from 'redux';
3+
4+
import * as TYPES from '../actionType';
5+
6+
export interface HomeState {
7+
counter: number;
8+
}
9+
10+
const initialState: HomeState = {
11+
counter: 0,
12+
};
13+
14+
export default function homeReducer(state = initialState, action: AnyAction): HomeState {
15+
switch (action.type) {
16+
case TYPES.HOME_COUNTER:
17+
return { ...state, counter: action.payload };
18+
default:
19+
return state;
20+
}
21+
}
22+

‎src/store/reducers/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import {combineReducers, ReducersMapObject, Reducer} from 'redux';
22
import {connectRouter} from 'connected-react-router';
33

44
import history from '@/store/history';
5+
import homeReducer from '@/store/reducers/home';
56

67
const reducers: ReducersMapObject = {
78
router: connectRouter(history),
9+
home: homeReducer,
810
};
911

1012
type RootState = {

‎yarn.lock

+15-8
Original file line numberDiff line numberDiff line change
@@ -990,6 +990,13 @@
990990
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"
991991
integrity sha1-M2utwb7sudrMOL6izzKt9ieoQho=
992992

993+
"@types/chalk@^2.2.0":
994+
version "2.2.0"
995+
resolved "https://registry.npm.taobao.org/@types/chalk/download/@types/chalk-2.2.0.tgz#b7f6e446f4511029ee8e3f43075fb5b73fbaa0ba"
996+
integrity sha1-t/bkRvRRECnujj9DB1+1tz+6oLo=
997+
dependencies:
998+
chalk "*"
999+
9931000
"@types/classnames@^2.2.11":
9941001
version "2.2.11"
9951002
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:
18791886
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"
18801887
integrity sha1-rMbUpTxovhbPwxTVXJyrY35VjLo=
18811888

1889+
chalk@*, chalk@^4.0.0, chalk@^4.1.0:
1890+
version "4.1.0"
1891+
resolved "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
1892+
integrity sha1-ThSHCmGNni7dl92DRf2dncMVZGo=
1893+
dependencies:
1894+
ansi-styles "^4.1.0"
1895+
supports-color "^7.1.0"
1896+
18821897
chalk@^2.0.0:
18831898
version "2.4.2"
18841899
resolved "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1888,14 +1903,6 @@ chalk@^2.0.0:
18881903
escape-string-regexp "^1.0.5"
18891904
supports-color "^5.3.0"
18901905

1891-
chalk@^4.0.0:
1892-
version "4.1.0"
1893-
resolved "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
1894-
integrity sha1-ThSHCmGNni7dl92DRf2dncMVZGo=
1895-
dependencies:
1896-
ansi-styles "^4.1.0"
1897-
supports-color "^7.1.0"
1898-
18991906
chokidar@^2.1.8:
19001907
version "2.1.8"
19011908
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"

0 commit comments

Comments
 (0)