From 1e0a526865465758a0793f2dced5c20a6d353a96 Mon Sep 17 00:00:00 2001
From: luoxue <luoxue@zhuanzhuan.com>
Date: Tue, 10 Dec 2019 20:18:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(auto=20readme):=20=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=20readme=20=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |  3 +-
 CHANGELOG.md                                  | 27 +++---
 README.md                                     | 96 ++++++++++++-------
 config/manifest.js                            |  1 -
 .../\350\257\276\346\227\266-01.md"           |  2 +-
 .../\350\257\276\346\227\266-02.md"           |  2 +-
 .../\350\257\276\346\227\266-03.md"           |  2 +-
 .../\350\257\276\346\227\266-04.md"           |  2 +-
 .../\350\257\276\346\227\266-05.md"           |  2 +-
 .../\350\257\276\346\227\266-06.md"           |  2 +-
 .../\350\257\276\346\227\266-07.md"           |  2 +-
 .../\350\257\276\346\227\266-08.md"           |  2 +-
 .../\350\257\276\346\227\266-09.md"           |  2 +-
 .../\350\257\276\346\227\266-10.md"           |  2 +-
 .../\350\257\276\346\227\266-11.md"           |  2 +-
 .../\350\257\276\346\227\266-12.md"           |  2 +-
 .../\350\257\276\346\227\266-13.md"           |  2 +-
 package.json                                  |  6 +-
 util/createReadme.js                          | 76 ++++++++++++++-
 util/readme/header.md                         |  5 +
 util/readme/useAndIntsall.md                  | 46 +++++++++
 21 files changed, 222 insertions(+), 64 deletions(-)
 rename "docs/\350\257\276\346\227\2661.md" => "docs/\350\257\276\346\227\266-01.md" (99%)
 rename "docs/\350\257\276\346\227\2662.md" => "docs/\350\257\276\346\227\266-02.md" (98%)
 rename "docs/\350\257\276\346\227\2663.md" => "docs/\350\257\276\346\227\266-03.md" (99%)
 rename "docs/\350\257\276\346\227\2664.md" => "docs/\350\257\276\346\227\266-04.md" (99%)
 rename "docs/\350\257\276\346\227\2665.md" => "docs/\350\257\276\346\227\266-05.md" (98%)
 rename "docs/\350\257\276\346\227\2666.md" => "docs/\350\257\276\346\227\266-06.md" (99%)
 rename "docs/\350\257\276\346\227\2667.md" => "docs/\350\257\276\346\227\266-07.md" (99%)
 rename "docs/\350\257\276\346\227\2668.md" => "docs/\350\257\276\346\227\266-08.md" (98%)
 rename "docs/\350\257\276\346\227\2669.md" => "docs/\350\257\276\346\227\266-09.md" (99%)
 rename "docs/\350\257\276\346\227\26610.md" => "docs/\350\257\276\346\227\266-10.md" (99%)
 rename "docs/\350\257\276\346\227\26611.md" => "docs/\350\257\276\346\227\266-11.md" (99%)
 rename "docs/\350\257\276\346\227\26612.md" => "docs/\350\257\276\346\227\266-12.md" (99%)
 rename "docs/\350\257\276\346\227\26613.md" => "docs/\350\257\276\346\227\266-13.md" (98%)
 create mode 100644 util/readme/header.md
 create mode 100644 util/readme/useAndIntsall.md

diff --git a/.eslintrc.js b/.eslintrc.js
index 46ed8820..3c085056 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,7 +13,8 @@ module.exports = {
     'max-len': 0,
     'space-before-function-paren': 0,
     'eslint-disable-next-line': 0,
-    'no-useless-escape': 0
+    'no-useless-escape': 0,
+    'one-var': 0
   },
   globals: {
     wx: true,
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c961b71..e826b09a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,19 @@
  asd | [d278787](https://github.com/luoxue-victor/learn_webpack/commit/d278787)
 
 
+### 🐛 Bug 修复
+范围|描述|commitId
+--|--|--
+ 更新了 commitlint 功能 | commitlint 更新到 1.0.10 版本 | [57155ce](https://github.com/luoxue-victor/learn_webpack/commit/57155ce)
+ build | 修复了build是 publicPath 的问题 | [ac2ab19](https://github.com/luoxue-victor/learn_webpack/commit/ac2ab19)
+ build/base | 获取文件名使用path.basename | [5efdc7d](https://github.com/luoxue-victor/learn_webpack/commit/5efdc7d)
+ changelog | fix some changelog | [3bc624a](https://github.com/luoxue-victor/learn_webpack/commit/3bc624a)
+ commit config | 修改提交代码配置 | [dd90ff9](https://github.com/luoxue-victor/learn_webpack/commit/dd90ff9)
+ delete | 删除无用代码 | [0831fc9](https://github.com/luoxue-victor/learn_webpack/commit/0831fc9)
+ package | asdasdasdad | [8a4cff1](https://github.com/luoxue-victor/learn_webpack/commit/8a4cff1)
+ scripts cz | 修改脚本cz命令 | [b4a8c51](https://github.com/luoxue-victor/learn_webpack/commit/b4a8c51)
+
+
 ### 📝 文档
 范围|描述|commitId
 --|--|--
@@ -51,6 +64,7 @@
  eslint 文档 | 修改eslint 文档，并添加cwd分层 | [d23329b](https://github.com/luoxue-victor/learn_webpack/commit/d23329b)
  readme | 保存文档 | [99c82c1](https://github.com/luoxue-victor/learn_webpack/commit/99c82c1)
  readme | 代码折叠默认展开 | [01e1ea8](https://github.com/luoxue-victor/learn_webpack/commit/01e1ea8)
+ readme | 添加readme 钩子 | [83d51b1](https://github.com/luoxue-victor/learn_webpack/commit/83d51b1)
  readme | 新增ssr说明 | [18e152a](https://github.com/luoxue-victor/learn_webpack/commit/18e152a)
  readme | 修改文档 | [8cd7443](https://github.com/luoxue-victor/learn_webpack/commit/8cd7443)
  readme | 修改readme | [06b1b2f](https://github.com/luoxue-victor/learn_webpack/commit/06b1b2f)
@@ -66,16 +80,3 @@
  dev,build 命令descreiption错误 | [b47f016](https://github.com/luoxue-victor/learn_webpack/commit/b47f016)
  Initial commit | [18fbebf](https://github.com/luoxue-victor/learn_webpack/commit/18fbebf)
 
-
-### 🐛 Bug 修复
-范围|描述|commitId
---|--|--
- 更新了 commitlint 功能 | commitlint 更新到 1.0.10 版本 | [57155ce](https://github.com/luoxue-victor/learn_webpack/commit/57155ce)
- build | 修复了build是 publicPath 的问题 | [ac2ab19](https://github.com/luoxue-victor/learn_webpack/commit/ac2ab19)
- build/base | 获取文件名使用path.basename | [5efdc7d](https://github.com/luoxue-victor/learn_webpack/commit/5efdc7d)
- changelog | fix some changelog | [3bc624a](https://github.com/luoxue-victor/learn_webpack/commit/3bc624a)
- commit config | 修改提交代码配置 | [dd90ff9](https://github.com/luoxue-victor/learn_webpack/commit/dd90ff9)
- delete | 删除无用代码 | [0831fc9](https://github.com/luoxue-victor/learn_webpack/commit/0831fc9)
- package | asdasdasdad | [8a4cff1](https://github.com/luoxue-victor/learn_webpack/commit/8a4cff1)
- scripts cz | 修改脚本cz命令 | [b4a8c51](https://github.com/luoxue-victor/learn_webpack/commit/b4a8c51)
-
diff --git a/README.md b/README.md
index 7eee4bb7..f69f4986 100644
--- a/README.md
+++ b/README.md
@@ -3,29 +3,25 @@
 > 本来想要做一个大型项目的 webpack 教程，但是我发现还可以做更多的事情，所以这里我要将这个项目做成 webpack 手册，您可以来这里找到任何想要的 webpack 配置
 
 本文从下面几个课题来实现
-
-### 课题列表
-
+### 所有课题
 <details open=“open”>
- <summary>点击关闭/打开课题列表</summary>
-
-- 课题 1：[初探 webpack？探究 webpack 打包原理](./docs/课时1.md)。
-- 课题 2：[搭建开发环境跟生产环境](./docs/课时2.md)
-- 课题 3：[基础配置之 loader](./docs/课时3.md)
-- 课时 4：[webpack 性能优化](./docs/课时4.md)
-- 课时 5：[手写 loader 实现可选链](./docs/课时5.md)
-- 课时 6：[webpack 编译优化](./docs/课时6.md)
-- 课时 7：[多页面配置](./docs/课时7.md)
-- 课时 8：[手写一个 webpack 插件](./docs/课时8.md)
-- 课时 9：[构建 ssr 项目模型](./docs/课时9.md)
-- 课时 10：[添加 eslint 并自动修复](./docs/课时10.md)
-- 课时 11：[添加 stylelint 并自动修复](./docs/课时11.md)
-- 课时 12：[添加 tslint 并自动修复](./docs/课时12.md)
-- 课时 13：[配置别名](./docs/课时13.md)
-
-</details>
-
-### 安装
+  <summary>点击关闭/打开所有课题</summary> 
+
+- [课题01：初探 webpack](./docs/课时-01.md)
+- [课题02：搭建可插拔的开发环境跟生产环境](./docs/课时-02.md)
+- [课题03：基础配置（loder，ts、babel、css、less、sass、postcss）等](./docs/课时-03.md)
+- [课题04：webpack 性能优化1](./docs/课时-04.md)
+- [课题05: 手写一个loader，实现可选链](./docs/课时-05.md)
+- [课题06: webpack编译优化](./docs/课时-06.md)
+- [课题07：多页面配置](./docs/课时-07.md)
+- [课题08：手写一个 webpack plugin](./docs/课时-08.md)
+- [课题09：webpack 构建 ssr](./docs/课时-09.md)
+- [课题10：添加 eslint 并开启自动修复](./docs/课时-10.md)
+- [课题11：添加 stylelint](./docs/课时-11.md)
+- [课题12：添加 tslint](./docs/课时-12.md)
+- [课题13：配置别名](./docs/课时-13.md)
+
+</details>### 安装
 
 <details open=“open”>
  <summary>点击关闭/打开安装</summary>
@@ -71,17 +67,45 @@ webpack-box lint stylelint # 自动修复 stylelint 错误
 ```
 
 </details>
-
-### 扩展配置
-
+### 所有配置
 <details open=“open”>
-  <summary>点击关闭/打开扩展配置</summary>
+  <summary>点击关闭/打开所有配置</summary> 
+
+- [打包分析](./config/BundleAnalyzerPlugin.js)
+- [开启gzip](./config/CompressionWebpackPlugin.js)
+- [dll-plugin 配置](./config/DllPlugin.js)
+- [fork-ts-checher 检查ts类型](./config/ForkTsChecker.js)
+- [friendly-errors-webpack-plugin 友好错误提示](./config/FriendlyErrorsWebpackPlugin.js)
+- [html-webpack-plugin 生成html](./config/HtmlWebpackPlugin.js)
+- [mini-css-extract-plugin 配置](./config/MiniCssExtractPlugin.js)
+- [别名配置](./config/alias.js)
+- [babel-loader 配置](./config/babelLoader.js)
+- [基础配置](./config/base.js)
+- [cache-loader 配置](./config/cacheLoader.js)
+- [eslint-loader 配置](./config/eslintLoader.js)
+- [提取 manifest](./config/manifest.js)
+- [optimization 优化配置](./config/optimization.js)
+- [样式表配置](./config/style.js)
+- [stylelint 配置](./config/styleLintPlugin.js)
+- [多线程配置](./config/threadLoader.js)
+- [tslint 配置](./config/tslintPlugin.js)
 
-在根目录下添加 `box.config.js`，即可配置使用
-
-box.config.js
+</details>
+  ### 扩展配置
+
+  <details open=“open”>
+    <summary>点击关闭/打开扩展配置</summary>
+  
+  在根目录下添加 `box.config.js`，即可配置使用
+  
+  box.config.js
+  
+  ```js
+const path = require('path')
+function resolve (dir) {
+  return path.join(process.cwd(), dir)
+}
 
-```js
 module.exports = function (config) {
   /**
    * @param {object} dll 开启差分包
@@ -89,17 +113,23 @@ module.exports = function (config) {
    * @param {function} chainWebpack
    * @param {string} entry 入口
    * @param {string} output 出口
+   *
    * @param {string} publicPath
    * @param {string} port 端口
    * @param {object} eslint eslint 配置
    * @param {object} stylelint stylelint 配置
    * @param {object} eslint eslint 配置
+   * @param {object} alias 配置别名
    */
   return {
     entry: 'src/main.js',
     output: 'dist',
     publicPath: '/common/',
     port: 8888,
+    alias: {
+      '@': resolve('src'),
+      '@src': resolve('src')
+    },
     eslint: {
       lintOnSave: true, // 开启运行时检测
       extensions: ['js', 'jsx', 'vue'] // 默认 ['js', 'jsx']
@@ -131,6 +161,8 @@ module.exports = function (config) {
     }
   }
 }
-```
 
-</details>
+  ```
+  
+  </details>  
+  
\ No newline at end of file
diff --git a/config/manifest.js b/config/manifest.js
index 53026913..4aefaced 100644
--- a/config/manifest.js
+++ b/config/manifest.js
@@ -1,4 +1,3 @@
-
 // [提取 manifest]
 module.exports = ({ config }) => {
   return () => {
diff --git "a/docs/\350\257\276\346\227\2661.md" "b/docs/\350\257\276\346\227\266-01.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\2661.md"
rename to "docs/\350\257\276\346\227\266-01.md"
index f7a255fa..f7f8edef 100644
--- "a/docs/\350\257\276\346\227\2661.md"
+++ "b/docs/\350\257\276\346\227\266-01.md"
@@ -1,4 +1,4 @@
-## 课题 1: 初探 webpack
+## 课题01：初探 webpack
 
 想要学好 `webpack`，我们首先要了解 `webpack` 的机制，我们先从js加载css开始学习。
 
diff --git "a/docs/\350\257\276\346\227\2662.md" "b/docs/\350\257\276\346\227\266-02.md"
similarity index 98%
rename from "docs/\350\257\276\346\227\2662.md"
rename to "docs/\350\257\276\346\227\266-02.md"
index 4d1a94d0..bf5ab211 100644
--- "a/docs/\350\257\276\346\227\2662.md"
+++ "b/docs/\350\257\276\346\227\266-02.md"
@@ -1,4 +1,4 @@
-## 课题 2：搭建可插拔的开发环境跟生产环境
+## 课题02：搭建可插拔的开发环境跟生产环境
 
 本章提要：
 
diff --git "a/docs/\350\257\276\346\227\2663.md" "b/docs/\350\257\276\346\227\266-03.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\2663.md"
rename to "docs/\350\257\276\346\227\266-03.md"
index c64c3e77..a45242b6 100644
--- "a/docs/\350\257\276\346\227\2663.md"
+++ "b/docs/\350\257\276\346\227\266-03.md"
@@ -1,4 +1,4 @@
-## 课题 3：基础配置（loder，ts、babel、css、less、sass、postcss）等
+## 课题03：基础配置（loder，ts、babel、css、less、sass、postcss）等
 
 本章提要：
 
diff --git "a/docs/\350\257\276\346\227\2664.md" "b/docs/\350\257\276\346\227\266-04.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\2664.md"
rename to "docs/\350\257\276\346\227\266-04.md"
index cb9fde58..97202b5f 100644
--- "a/docs/\350\257\276\346\227\2664.md"
+++ "b/docs/\350\257\276\346\227\266-04.md"
@@ -1,4 +1,4 @@
-## 课时 4：webpack 性能优化1
+## 课题04：webpack 性能优化1
 
 本章讲解
 
diff --git "a/docs/\350\257\276\346\227\2665.md" "b/docs/\350\257\276\346\227\266-05.md"
similarity index 98%
rename from "docs/\350\257\276\346\227\2665.md"
rename to "docs/\350\257\276\346\227\266-05.md"
index 059bd9d7..e5d8e3a9 100644
--- "a/docs/\350\257\276\346\227\2665.md"
+++ "b/docs/\350\257\276\346\227\266-05.md"
@@ -1,4 +1,4 @@
-## 手写一个loader，实现可选链
+## 课题05: 手写一个loader，实现可选链
 
 本章内容
 
diff --git "a/docs/\350\257\276\346\227\2666.md" "b/docs/\350\257\276\346\227\266-06.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\2666.md"
rename to "docs/\350\257\276\346\227\266-06.md"
index 6adf19c8..d2b0c477 100644
--- "a/docs/\350\257\276\346\227\2666.md"
+++ "b/docs/\350\257\276\346\227\266-06.md"
@@ -1,4 +1,4 @@
-## webpack编译优化
+## 课题06: webpack编译优化
 
 本章内容
 
diff --git "a/docs/\350\257\276\346\227\2667.md" "b/docs/\350\257\276\346\227\266-07.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\2667.md"
rename to "docs/\350\257\276\346\227\266-07.md"
index a08927d5..9458ce2f 100644
--- "a/docs/\350\257\276\346\227\2667.md"
+++ "b/docs/\350\257\276\346\227\266-07.md"
@@ -1,4 +1,4 @@
-## 多页面配置
+## 课题07：多页面配置
 
 **注意**
 
diff --git "a/docs/\350\257\276\346\227\2668.md" "b/docs/\350\257\276\346\227\266-08.md"
similarity index 98%
rename from "docs/\350\257\276\346\227\2668.md"
rename to "docs/\350\257\276\346\227\266-08.md"
index 79aca4e4..6492ecfa 100644
--- "a/docs/\350\257\276\346\227\2668.md"
+++ "b/docs/\350\257\276\346\227\266-08.md"
@@ -1,4 +1,4 @@
-## 手写一个 webpack plugin
+## 课题08：手写一个 webpack plugin
 
 如果把 webpack 当成一个垃圾工厂，loader 就是垃圾分类，将所有垃圾整理好交给 webpack。plugin 就是如何去处理这些垃圾。
 
diff --git "a/docs/\350\257\276\346\227\2669.md" "b/docs/\350\257\276\346\227\266-09.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\2669.md"
rename to "docs/\350\257\276\346\227\266-09.md"
index d24661af..400188ce 100644
--- "a/docs/\350\257\276\346\227\2669.md"
+++ "b/docs/\350\257\276\346\227\266-09.md"
@@ -1,4 +1,4 @@
-## webpack 构建 ssr
+## 课题09：webpack 构建 ssr
 
 ssr 就是服务端渲染，做 ssr 的好处就是为了处理 spa 的不足，比如 seo 优化，服务端缓存等问题。
 
diff --git "a/docs/\350\257\276\346\227\26610.md" "b/docs/\350\257\276\346\227\266-10.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\26610.md"
rename to "docs/\350\257\276\346\227\266-10.md"
index baa0a35f..44f56c72 100644
--- "a/docs/\350\257\276\346\227\26610.md"
+++ "b/docs/\350\257\276\346\227\266-10.md"
@@ -1,4 +1,4 @@
-# 添加 eslint 并开启自动修复
+## 课题10：添加 eslint 并开启自动修复
 
 本章概要
 
diff --git "a/docs/\350\257\276\346\227\26611.md" "b/docs/\350\257\276\346\227\266-11.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\26611.md"
rename to "docs/\350\257\276\346\227\266-11.md"
index 458f7b57..26517605 100644
--- "a/docs/\350\257\276\346\227\26611.md"
+++ "b/docs/\350\257\276\346\227\266-11.md"
@@ -1,4 +1,4 @@
-# 添加 stylelint
+## 课题11：添加 stylelint
 
 本章概要
 
diff --git "a/docs/\350\257\276\346\227\26612.md" "b/docs/\350\257\276\346\227\266-12.md"
similarity index 99%
rename from "docs/\350\257\276\346\227\26612.md"
rename to "docs/\350\257\276\346\227\266-12.md"
index 19cba2c3..42728a47 100644
--- "a/docs/\350\257\276\346\227\26612.md"
+++ "b/docs/\350\257\276\346\227\266-12.md"
@@ -1,4 +1,4 @@
-# 添加 tslint
+## 课题12：添加 tslint
 
 本章概要
 
diff --git "a/docs/\350\257\276\346\227\26613.md" "b/docs/\350\257\276\346\227\266-13.md"
similarity index 98%
rename from "docs/\350\257\276\346\227\26613.md"
rename to "docs/\350\257\276\346\227\266-13.md"
index 1e83eb4a..7451e2a5 100644
--- "a/docs/\350\257\276\346\227\26613.md"
+++ "b/docs/\350\257\276\346\227\266-13.md"
@@ -1,4 +1,4 @@
-# 配置别名
+## 课题13：配置别名
 
 在我们工作中，如果一个文件需要被 copy 到另外一个目录下，那么这个文件的引用依赖就可能发生路径错误。还有我们不喜欢每次引入依赖都要逐层去查找，我们希望能够有一个别名来指定某一个目录，无论我们在哪里使用它。
 
diff --git a/package.json b/package.json
index fc1f3d58..c94f5bb2 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
     "cz": "npm run log && git add . && git cz",
-    "readme": "node util/createReadme.js"
+    "cr": "node util/createReadme.js"
   },
   "repository": {
     "type": "git",
@@ -103,8 +103,8 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "npm run readme && commitlint -E HUSKY_GIT_PARAMS"
+      "pre-commit": "npm run cr && lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
   "lint-staged": {
diff --git a/util/createReadme.js b/util/createReadme.js
index 38917524..6987eab9 100644
--- a/util/createReadme.js
+++ b/util/createReadme.js
@@ -1,2 +1,76 @@
 #!/usr/bin/env node
-console.log('----------创建readme-------')
+const fs = require('fs')
+const path = require('path')
+const readmePath = path.join('util', 'readme')
+
+let configCtx = '',
+  docsCtx = ''
+
+configCtx = extraTxt('config', function(firstRow) {
+  return firstRow.replace('// ', '')
+})
+
+docsCtx = extraTxt('docs', function(firstRow) {
+  return `[${firstRow.replace('## ', '')}]`
+})
+
+function joinCtx () {
+  let str = ''
+  str += readMdBy('header')
+  str += detailTag('所有课题', docsCtx)
+  str += readMdBy('useAndIntsall')
+  str += detailTag('所有配置', configCtx)
+  str += boxConfig()
+  return str
+}
+
+const ctx = joinCtx()
+
+fs.writeFileSync('README.md', ctx, 'utf-8')
+
+function detailTag (title, ctx) {
+  return `
+### ${title}
+<details open=“open”>
+  <summary>点击关闭/打开${title}</summary> \n\n${ctx}
+</details>`
+}
+
+function extraTxt (dirname, firstRowStrategy) {
+  const files = fs.readdirSync(dirname)
+  let ctx = ''
+  files.forEach(file => {
+    const absolutePath = path.join(process.cwd(), dirname, file)
+    if (fs.statSync(absolutePath).isDirectory()) return
+    const content = fs.readFileSync(absolutePath).toString()
+    const firstRow = content.split('\n')[0].trim()
+    const title = firstRowStrategy(firstRow)
+    ctx += `- ${title}(./${dirname}/${file})\n`
+  })
+  return ctx
+}
+
+function boxConfig () {
+  let ctx = ''
+  ctx = fs.readFileSync(path.join(process.cwd(), 'box.config.js')).toString()
+  return `
+  ### 扩展配置
+
+  <details open=“open”>
+    <summary>点击关闭/打开扩展配置</summary>
+  
+  在根目录下添加 \`box.config.js\`，即可配置使用
+  
+  box.config.js
+  
+  \`\`\`js
+${ctx}
+  \`\`\`
+  
+  </details>  
+  `
+}
+
+function readMdBy(name) {
+  return fs.readFileSync(path.join(readmePath, name + '.md')).toString()
+}
diff --git a/util/readme/header.md b/util/readme/header.md
new file mode 100644
index 00000000..dbc93130
--- /dev/null
+++ b/util/readme/header.md
@@ -0,0 +1,5 @@
+# webpack 工程师的自我修养
+
+> 本来想要做一个大型项目的 webpack 教程，但是我发现还可以做更多的事情，所以这里我要将这个项目做成 webpack 手册，您可以来这里找到任何想要的 webpack 配置
+
+本文从下面几个课题来实现
\ No newline at end of file
diff --git a/util/readme/useAndIntsall.md b/util/readme/useAndIntsall.md
new file mode 100644
index 00000000..22405fff
--- /dev/null
+++ b/util/readme/useAndIntsall.md
@@ -0,0 +1,46 @@
+### 安装
+
+<details open=“open”>
+ <summary>点击关闭/打开安装</summary>
+
+```bash
+npm i -g webpack-box # 全局安装使用
+npm link # 建立软连接，可以使用 webpack-box 命令
+```
+
+</details>
+
+### 使用
+
+<details open=“open”>
+ <summary>点击关闭/打开使用</summary>
+
+```bash
+webpack-box dev   # 开发环境
+webpack-box build # 生产环境
+webpack-box dll   # 编译差分包
+webpack-box dev index   # 指定页面编译（多页面）
+webpack-box build index # 指定页面编译（多页面）
+webpack-box build index --report # 开启打包分析
+webpack-box build:ssr  # 编译ssr
+webpack-box ssr:server # 在 server 端运行
+webpack-box lint eslint # 自动修复 eslint 错误
+webpack-box lint tslint # 自动修复 tslint 错误
+webpack-box lint stylelint # 自动修复 stylelint 错误
+```
+
+在 package.json 中使用
+
+```json
+{
+  "scripts": {
+    "dev": "webpack-box dev",
+    "build": "webpack-box build",
+    "dll": "webpack-box dll",
+    "build:ssr": "webpack-box build:ssr",
+    "ssr:server": "webpack-box ssr:server"
+  }
+}
+```
+
+</details>
\ No newline at end of file