Skip to content

Commit eedcc01

Browse files
author
sunss
committed
Merge branch 'master' of github.com:JS-banana/webpack-react-ts
2 parents e0fe64b + c1f3dea commit eedcc01

File tree

10 files changed

+9395
-9268
lines changed

10 files changed

+9395
-9268
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# build
2-
build
2+
dist
33

44
# node_modules
55
node_modules
@@ -11,6 +11,6 @@ coverage
1111
npm-debug.log
1212
yarn-error.log
1313

14-
#
14+
#
1515
.DS_Store
1616
.idea

‎License‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2021 - present JS-banana
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# webpack-react-ts
2+
3+
## 开发
4+
5+
- **使用 Github1s 在线预览源码**
6+
7+
[![Preview in Github1s](https://raw.githubusercontent.com/conwnet/github1s/master/resources/images/logo.svg)](https://github1s.com/JS-banana/webpack-react-ts/)
8+
9+
- **使用 Gitpod 体验在线开发环境**
10+
11+
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JS-banana/webpack-react-ts/)
12+
13+
- **克隆到本地**
14+
15+
```sh
16+
# clone
17+
git clone https://github.com/JS-banana/webpack-react-ts
18+
19+
# install
20+
npm install
21+
# pnpm
22+
pnpm install
23+
# or
24+
yarn install
25+
26+
# dev serve
27+
yarn dev
28+
```
29+
30+
## 特性
31+
32+
- 支持`Typescript`
33+
- 支持`React`、`JSX`语法
34+
- 支持`ES6`语法
35+
- 支持`Less module`
36+
- 支持`Eslint`、`Prettier`、`Pre-commit hook`
37+
- 支持`HMR`快速热更新
38+
- 支持`Antd`按需引入与主题样式覆盖
39+
- 支持`Proxy`代理、`alias`别名
40+
41+
## 目录结构
42+
43+
```js
44+
├── .husky // git hook 配置文件
45+
├── dist // 默认的 build 输出目录
46+
├── config // 全局配置文件
47+
├── public // 静态文件
48+
├── test // 测试文件
49+
└── src // 源码目录
50+
├── assets // 公共的文件（如image、css、font等）
51+
├── components // 项目组件
52+
├── constants // 常量/接口地址等
53+
├── layout // 全局布局
54+
├── routes // 路由
55+
├── store // 状态管理器
56+
├── utils // 工具库
57+
├── pages // 页面模块
58+
├── Home // Home模块，建议组件统一大写开头
59+
├── ...
60+
├── App.tsx // react顶层文件
61+
├── index.ts // 项目入口文件
62+
├── typing.d.ts // ts类型文件
63+
├── .editorconfig // IDE格式规范
64+
├── .env // 环境变量
65+
├── .eslintignore // eslint忽略
66+
├── .eslintrc // eslint配置文件
67+
├── .gitignore // git忽略
68+
├── .npmrc // npm配置文件
69+
├── .prettierignore // prettierc忽略
70+
├── .prettierrc // prettierc配置文件
71+
├── .stylelintrc // stylelint配置文件
72+
├── .babel.config.js // babel配置文件
73+
├── commitlint.config.js // git commit lint 配置文件
74+
├── LICENSE.md // LICENSE
75+
├── package.json // package
76+
├── postcss.config.js // postcss
77+
├── README.md // README
78+
├── setupEnzyme.ts // enzyme 测试配置文件
79+
├── tsconfig.eslint.json // eslint拓展typescript配置文件
80+
└── tsconfig.json // tsconfig
81+
```

‎commitlint.config.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
1+
// git commit 规范
2+
// <类型>[可选的作用域]: <描述>
3+
4+
// # 主要type
5+
// feat: 增加新功能
6+
// fix: 修复bug
7+
8+
// # 特殊type
9+
// docs: 只改动了文档相关的内容
10+
// style: 不影响代码含义的改动，例如去掉空格、改变缩进、增删分号
11+
// build: 构造工具的或者外部依赖的改动，例如webpack，npm
12+
// refactor: 代码重构时使用
13+
// revert: 执行git revert打印的message
14+
15+
// # 暂不使用type
16+
// test: 添加测试或者修改现有测试
17+
// perf: 提高性能的改动
18+
// ci: 与CI（持续集成服务）有关的改动
19+
// chore: 不修改src或者test的其余修改，例如构建过程或辅助工具的变动
20+
121
module.exports = {
222
extends: ['@commitlint/config-conventional'],
323
};

‎config/setting.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
// 开启依赖分析
3+
Analyzer: true,
4+
// 开启Gzip
5+
Gzip: true,
6+
};

‎config/webpack.base.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
22
const HtmlWebpackPlugin = require('html-webpack-plugin');
3-
const path = require('path');
43
const paths = require('./paths');
54

65
/** @type {import('webpack').Configuration} */
76
module.exports = {
87
entry: './src/index.tsx',
98
output: {
10-
path: path.resolve(__dirname, '..dist'),
9+
path: paths.build,
1110
filename: '[name].[contenthash].js',
1211
publicPath: '',
1312
},
@@ -103,7 +102,7 @@ module.exports = {
103102
],
104103
},
105104
resolve: {
106-
extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
105+
extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', 'less'],
107106
alias: {
108107
'@': paths.src,
109108
'react-dom': '@hot-loader/react-dom',

‎config/webpack.dev.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
const path = require('path');
21
const { HotModuleReplacementPlugin } = require('webpack');
32
const HtmlWebpackPlugin = require('html-webpack-plugin');
43
const { merge } = require('webpack-merge');

‎config/webpack.prod.js‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
22
const TerserPlugin = require('terser-webpack-plugin');
33
const CompressionPlugin = require('compression-webpack-plugin');
4-
const { HashedModuleIdsPlugin } = require('webpack');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
56

67
const { merge } = require('webpack-merge');
78
const common = require('./webpack.base');
9+
const DefaultSetting = require('./setting');
810

911
/** @type {import('webpack').Configuration} */
1012
const prodConfig = {
1113
mode: 'production',
12-
devtool: 'hidden-source-map',
1314

1415
output: {
1516
filename: '[name].[chunkhash].js',
@@ -24,6 +25,7 @@ const prodConfig = {
2425
},
2526
],
2627
},
28+
2729
optimization: {
2830
minimize: true,
2931
minimizer: [
@@ -40,10 +42,10 @@ const prodConfig = {
4042
ascii_only: true,
4143
},
4244
},
43-
sourceMap: true,
4445
}),
4546
],
4647
nodeEnv: 'production',
48+
moduleIds: 'deterministic',
4749
sideEffects: true,
4850
concatenateModules: true,
4951
runtimeChunk: 'single',
@@ -82,23 +84,27 @@ const prodConfig = {
8284
inject: true,
8385
}),
8486

85-
new CompressionPlugin({
86-
algorithm: 'gzip',
87-
test: /\.js$|\.css$|\.html$/,
88-
threshold: 10240,
89-
minRatio: 0.8,
90-
}),
87+
// MiniCss
88+
new MiniCssExtractPlugin(),
9189

92-
new HashedModuleIdsPlugin({
93-
hashFunction: 'sha256',
94-
hashDigest: 'hex',
95-
hashDigestLength: 20,
96-
}),
97-
],
90+
// Gzip
91+
DefaultSetting.Gzip &&
92+
new CompressionPlugin({
93+
algorithm: 'gzip',
94+
test: /\.js$|\.css$|\.html$/,
95+
threshold: 10240,
96+
minRatio: 0.8,
97+
}),
98+
99+
// Analyzer
100+
DefaultSetting.Analyzer &&
101+
new BundleAnalyzerPlugin({
102+
analyzerPort: 9999,
103+
}),
104+
].filter(Boolean),
98105

99106
performance: {
100107
assetFilter: assetFilename => !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
101108
},
102109
};
103-
104110
module.exports = merge(common, prodConfig);

‎package.json‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
"version": "0.0.1",
44
"description": "a webpack5.x + react + typescript practices",
55
"main": "index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/JS-banana/webpack-react-ts"
9+
},
10+
"bugs": {
11+
"url": "https://github.com/JS-banana/webpack-react-ts/issues"
12+
},
613
"scripts": {
714
"prepare": "husky install",
815
"start": "npm run dev",
@@ -32,10 +39,7 @@
3239
"react-dom": "^17.0.2",
3340
"react-helmet-async": "^1.0.9",
3441
"react-hot-loader": "^4.13.0",
35-
"react-redux": "^7.2.4",
36-
"react-router-dom": "^5.2.0",
37-
"redux": "^4.1.1",
38-
"redux-saga": "^1.1.3"
42+
"react-router-dom": "^5.2.0"
3943
},
4044
"devDependencies": {
4145
"@babel/cli": "^7.14.8",
@@ -60,6 +64,7 @@
6064
"@types/webpack-env": "^1.16.2",
6165
"@typescript-eslint/eslint-plugin": "^4.29.0",
6266
"@typescript-eslint/parser": "^4.29.0",
67+
"autoprefixer": "^10.3.1",
6368
"babel-loader": "^8.2.2",
6469
"babel-plugin-dynamic-import-node": "^2.3.3",
6570
"babel-plugin-import": "^1.13.3",
@@ -89,6 +94,7 @@
8994
"less": "^4.1.1",
9095
"less-loader": "^10.0.1",
9196
"lint-staged": "^11.1.2",
97+
"mini-css-extract-plugin": "^2.2.0",
9298
"postcss-loader": "^6.1.1",
9399
"postcss-nested": "^5.0.6",
94100
"prettier": "^2.3.2",
@@ -104,6 +110,7 @@
104110
"typescript": "^4.3.5",
105111
"url-loader": "^4.1.1",
106112
"webpack": "^5.49.0",
113+
"webpack-bundle-analyzer": "^4.4.2",
107114
"webpack-cli": "^4.7.2",
108115
"webpack-dev-middleware": "^5.0.0",
109116
"webpack-dev-server": "^3.11.2",
@@ -118,7 +125,7 @@
118125
"testEnvironment": "node"
119126
},
120127
"browserslist": [
121-
"ie >= 10",
128+
"ie >= 11",
122129
"ff >= 30",
123130
"chrome >= 34",
124131
"safari >= 8",

0 commit comments

Comments
 (0)