fix

.env

@@ -1,5 +1,5 @@
 PORT=8081
 BASE_API=/website
 PROXY_PATH=http://localhost:8080
-ICON_URL=//at.alicdn.com/t/font_1169897_6r1duegrx56.css
-GITHUB_TOKEN=eff5199e5d2ba80b19d769a2b19890382fbae44a
+ICON_URL=//at.alicdn.com/t/font_1169897_yqwka7rl9l8.css
+GITHUB_TOKEN=88b1492d0a1036e1023e53cbfa0fea28db3e8984

.env.production

@@ -1,2 +1,3 @@
 BASE_API=/
+PUBLIC_URL=/blog
 ICON_URL=fonts/iconfont.css

.prettierrc.js

@@ -46,6 +46,14 @@ module.exports = {
 				tabWidth: 2,
 				useTabs: false
 			}
+		},
+		{
+			files: ['*.md'],
+			options: {
+				parser: 'markdown',
+				tabWidth: 4,
+				useTabs: false
+			}
 		}
 	]
 };

babel.config.js

@@ -7,7 +7,18 @@ module.exports = {
 				libraryName: 'antd',
 				libraryDirectory: 'es',
 				style: 'css'
-			}
+			},
+			'import-for-antd'
+		],
+		[
+			'import',
+			{
+				libraryName: 'sober_components',
+				camel2DashComponentName: false,
+				libraryDirectory: 'es',
+				style: 'css'
+			},
+			'import-for-sober_components'
 		]
-	]   
+	]
 };

config/webpack.config.js

@@ -236,7 +236,7 @@ module.exports = function(webpackEnv = 'development') {
 			// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
 			splitChunks: {
 				chunks: 'all',
-				name: false
+				name: true
 			},
 			// Keep the runtime chunk separated to enable long term caching
 			// https://twitter.com/wSokra/status/969679223278505985

doc/webpack/webpack配置多页面踩坑.md

@@ -0,0 +1,180 @@
+[title]: #(在[email protected]中配置webpack多页面踩坑)
+[tag]: #(webpack,多页面,CreatReactApp)
+[preview]: #(start)
+
+记录在 [email protected] 创建的项目里配置 webpack`多页面`时的坑。
+
+[preview]: #(end)
+
+## 场景
+
+在 [email protected] 创建的 React 项目中，通过配置 webpack 来构建多页面应用。
+
+假设有三个页面：_page1_、_page2_、_page3_
+
+#### 主要目录结构为
+
+```
+my-app
+├── src
+│   └── pages
+│       ├── page1
+│       │  ├── App.tsx
+│       │  └── index.tsx
+│       ├── page2
+│       │  ├── App.tsx
+│       │  └── index.tsx
+│       └── page3
+│          ├── App.tsx
+│          └── index.tsx
+└── public
+    ├── page1.html
+    ├── page2.html
+    └── page3.html
+```
+
+#### 动态读取页面
+
+在 _config/paths.js_ 内重新定义`appIndexJs`和`appHtml`
+
+启动时通过 fs 读取 src/pages 目录的子文件夹，若是子文件夹有 index.tsx 则认为该子文件夹是一个页面模块目录，以目录名作为页面名，并以`public/${页面名}.html`作为 html 模板
+
+则运行结果大致为
+
+```js
+// paths.js
+module.exports = {
+    // ...
+    appIndexJs: [
+        {
+            name: 'page1',
+            index: '/absolute path/src/pages/page1/index.tsx'
+        },
+        {
+            name: 'page2',
+            index: '/absolute path/src/pages/page2/index.tsx'
+        },
+        {
+            name: 'page3',
+            index: '/absolute path/src/pages/page3/index.tsx'
+        }
+    ],
+    appHtml: [
+        {
+            template: '/absolute path/public/page1.html',
+            filename: 'page1.html',
+            name: 'page1'
+        },
+        {
+            template: '/absolute path/public/page2.html',
+            filename: 'page2.html',
+            name: 'page2'
+        },
+        {
+            template: '/absolute path/public/page3.html',
+            filename: 'page3.html',
+            name: 'page3'
+        }
+    ]
+};
+```
+
+#### 配置 webpack.config.js
+
+则修改 _config/webpack.config.js_ 为
+
+```js
+const paths = require('./paths');
+module.exports = function(webpackEnv) {
+    const isEnvDevelopment = webpackEnv === 'development';
+    const isEnvProduction = webpackEnv === 'production';
+    // ...others
+    const defaultEntry = [
+        isEnvDevelopment 
+            && require.resolve('react-dev-utils/webpackHotDevClient')
+    ].filter(Boolean);
+    return {
+        // ...others
+        entry: paths.appIndexJs.reduce((pre, { name, index }) => {
+            pre[name] = [...defaultEntry, index];
+            return pre;
+        }, {}),
+        output: {
+            // 如下output为Create React App 默认的配置
+            path: isEnvProduction ? paths.appBuild : undefined,
+            pathinfo: isEnvDevelopment,
+            filename: isEnvProduction
+                ? 'static/js/[name].[contenthash:8].js'
+                : isEnvDevelopment && 'static/js/bundle.js',
+            chunkFilename: isEnvProduction
+                ? 'static/js/[name].[contenthash:8].chunk.js'
+                : isEnvDevelopment && 'static/js/[name].chunk.js'
+            // ...
+        },
+        plugins: [
+            ...paths.appHtml.map(({ template, filename, name }) => {
+                return new HtmlWebpackPlugin({
+                    template,
+                    filename,
+                    chunks: [name]
+                    // ...others
+                });
+            })
+        ]
+    };
+};
+```
+
+## 问题
+
+#### 一、编译失败
+##### 问题表象
+- 1、运行`yarn run start` 启动devServer时，命令行一直卡顿在`Starting the development server...`状态，无法继续编译，经过控制变量法（修改了entry和HtmlWebpackPlugin）排查，发现只要entry里面有`main`为key的入口，则会正常编译
+
+- 2、运行`yarn run build` 构建项目时发生错误
+
+![failed-build](img/failed-build.png)
+
+##### 分析原因
+由上面两条得出，在编译时期发生了错误，错误信息为`build`时打印出来的：对*undefined*调用了*filter*，而`start`没有报错反而卡顿住了估计是devServer的一些内部原因，那我们对`webpack.config.js`进行错误排查，根据错误信息2，对`undefined`调用了`filter`，那我们就搜索`.filter`这个串，对结果依次排查，发现如下问题
+
+![manifestPluginError](img/manifestPluginError.png)
+
+关键就在于其中的`entrypoints.main.filter`，这个`entrypoints`是每个entry生成的bundle文件的集合对象，然而我们的entry里并没有`main`这个key，所以就报错了。
+[email protected]加入了这行代码，详情请见 [#7721](https://github.com/facebook/create-react-app/pull/7721)。
+
+##### 解决问题
+
+这个ManifestPlugin主要是生成资源映射配置，服务于`Workbox`用于离线访问的，然而这个离线访问这个功能其实并不重要，故而为了快速解决问题，直接将之注释就好了，恢复成[email protected]以前的样子如下：
+
+![manifestPluginFix](img/manifestPluginFix.png)
+
+项目启动成功！问题解决！
+
+#### 二、页面空白
+##### 问题表象
+- 1、除了page1.html正常显示，其他所有页面都显示一片空白，bundle并没有执行。
+
+- 2、page1.html、page2.html、page3.html页面上所引用的bundle如下:
+
+![bundle-page1](img/bundle-page1.png)
+![bundle-page2](img/bundle-page2.png)
+![bundle-page3](img/bundle-page3.png)
+
+##### 分析原因
+
+除了page1成功，其他都空白页面，我们观察到，这三个页面引用的bundle为`bundle.js`、`0.chunk.js`、`${name}.chunk.js`。
+
+其中`bundle.js`为入口文件，`0.chunk.js`为公共chunk代码，`${name}.chunk.js`为每个页面各自的代码。我们发现，公共chunk代码三个页面是一样的没有问题，但是三个页面各自的入口文件都为同一个`bundle.js`是不对的，这个`bundle.js`生成是由webpack config中的`ouput.filename`决定的。
+
+然后我们查看`webpack.config.js`的`output.filename`如下：
+
+![output.filename](img/output.filename.png)
+
+在`development`模式下，`filename`固定为`static/js/bundle.js`，问题找到了
+
+##### 解决问题
+
+在`development`模式下，将`filename`改为`static/js/[name].bundle.js`即可，为每一个bundle独立命名。
+
+项目启动，查看page1.html、page2.html、page3.html均引用各自的`[name].bundle.js`并成功显示对应的内容，问题解决！

package.json

@@ -4,7 +4,11 @@
   "private": true,
   "scripts": {
     "start": "node scripts/start.js",
-    "build": "node scripts/build.js"
+    "build": "node scripts/build.js",
+    "publish-home": "scp -r ./build/* [email protected]:/home/soberz/workspace/static/blog",
+    "publish-tencent": "scp -r ./build/* [email protected]:/home/sober/staticManager/blog",
+    "build-publish-home": "yarn run build && yarn run publish-home",
+    "build-publish-tencent": "yarn run build && yarn run publish-tencent"
   },
   "husky": {
     "hooks": {
@@ -38,6 +42,7 @@
     "css-loader": "2.1.1",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
+    "dts-gen": "^0.5.7",
     "file-loader": "3.0.1",
     "fs-extra": "^7.0.1",
     "highlight.js": "^9.15.9",
@@ -53,6 +58,7 @@
     "lint-staged": "^8.1.5",
     "markdown-it": "^8.4.2",
     "mini-css-extract-plugin": "0.5.0",
+    "moment": "^2.24.0",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
@@ -71,6 +77,7 @@
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "semver": "6.0.0",
+    "sober_components": "^0.1.6",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.3",
     "typescript": "3.4.5",

public/fonts/iconfont.css

@@ -0,0 +1,89 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1575258907777'); /* IE9 */
+  src: url('iconfont.eot?t=1575258907777#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1575258907777') format('woff'),
+  url('iconfont.ttf?t=1575258907777') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1575258907777#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-github:before {
+  content: "\e7ab";
+}
+
+.icon-duble-arrow-down:before {
+  content: "\e6bd";
+}
+
+.icon-email:before {
+  content: "\e638";
+}
+
+.icon-arrow-down-little:before {
+  content: "\e623";
+}
+
+.icon-arrow-down-line:before {
+  content: "\e68b";
+}
+
+.icon-timeline:before {
+  content: "\e685";
+}
+
+.icon-article:before {
+  content: "\e6a6";
+}
+
+.icon-arrow-right-line:before {
+  content: "\e6bc";
+}
+
+.icon-menu:before {
+  content: "\e600";
+}
+
+.icon-tag:before {
+  content: "\e72f";
+}
+
+.icon-about:before {
+  content: "\e7a6";
+}
+
+.icon-dir-close:before {
+  content: "\e79c";
+}
+
+.icon-npm:before {
+  content: "\f1fe";
+}
+
+.icon-arrow-down-hollow:before {
+  content: "\e62e";
+}
+
+.icon-dir-open:before {
+  content: "\e63a";
+}
+
+.icon-article-line:before {
+  content: "\e8b9";
+}
+
+.icon-arrow-down:before {
+  content: "\e610";
+}
+
+.icon-list:before {
+  content: "\e9dd";
+}
+