feat(auto readme): 自动生成 readme 文件

.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,

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)
-

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,35 +67,69 @@ 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 开启差分包
    * @param {object} pages 多页面配置 通过 box run/build index 来使用
    * @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>  
+

config/manifest.js

@@ -1,4 +1,3 @@
-
 // [提取 manifest]
 module.exports = ({ config }) => {
   return () => {

docs/课时1.md → docs/课时-01.md

@@ -1,4 +1,4 @@
-## 课题 1: 初探 webpack
+## 课题01：初探 webpack
 
 想要学好 `webpack`，我们首先要了解 `webpack` 的机制，我们先从js加载css开始学习。
 

docs/课时2.md → docs/课时-02.md

@@ -1,4 +1,4 @@
-## 课题 2：搭建可插拔的开发环境跟生产环境
+## 课题02：搭建可插拔的开发环境跟生产环境
 
 本章提要：
 

docs/课时3.md → docs/课时-03.md

@@ -1,4 +1,4 @@
-## 课题 3：基础配置（loder，ts、babel、css、less、sass、postcss）等
+## 课题03：基础配置（loder，ts、babel、css、less、sass、postcss）等
 
 本章提要：
 

docs/课时4.md → docs/课时-04.md

@@ -1,4 +1,4 @@
-## 课时 4：webpack 性能优化1
+## 课题04：webpack 性能优化1
 
 本章讲解
 

docs/课时5.md → docs/课时-05.md

@@ -1,4 +1,4 @@
-## 手写一个loader，实现可选链
+## 课题05: 手写一个loader，实现可选链
 
 本章内容
 

docs/课时6.md → docs/课时-06.md

@@ -1,4 +1,4 @@
-## webpack编译优化
+## 课题06: webpack编译优化
 
 本章内容
 

docs/课时7.md → docs/课时-07.md

@@ -1,4 +1,4 @@
-## 多页面配置
+## 课题07：多页面配置
 
 **注意**
 

docs/课时8.md → docs/课时-08.md

@@ -1,4 +1,4 @@
-## 手写一个 webpack plugin
+## 课题08：手写一个 webpack plugin
 
 如果把 webpack 当成一个垃圾工厂，loader 就是垃圾分类，将所有垃圾整理好交给 webpack。plugin 就是如何去处理这些垃圾。
 

docs/课时9.md → docs/课时-09.md

@@ -1,4 +1,4 @@
-## webpack 构建 ssr
+## 课题09：webpack 构建 ssr
 
 ssr 就是服务端渲染，做 ssr 的好处就是为了处理 spa 的不足，比如 seo 优化，服务端缓存等问题。
 

docs/课时10.md → docs/课时-10.md

@@ -1,4 +1,4 @@
-# 添加 eslint 并开启自动修复
+## 课题10：添加 eslint 并开启自动修复
 
 本章概要
 

docs/课时11.md → docs/课时-11.md

@@ -1,4 +1,4 @@
-# 添加 stylelint
+## 课题11：添加 stylelint
 
 本章概要
 

docs/课时12.md → docs/课时-12.md

@@ -1,4 +1,4 @@
-# 添加 tslint
+## 课题12：添加 tslint
 
 本章概要
 

docs/课时13.md → docs/课时-13.md

@@ -1,4 +1,4 @@
-# 配置别名
+## 课题13：配置别名
 
 在我们工作中，如果一个文件需要被 copy 到另外一个目录下，那么这个文件的引用依赖就可能发生路径错误。还有我们不喜欢每次引入依赖都要逐层去查找，我们希望能够有一个别名来指定某一个目录，无论我们在哪里使用它。
 

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": {

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()
+}

util/readme/header.md

@@ -0,0 +1,5 @@
+# webpack 工程师的自我修养
+
+> 本来想要做一个大型项目的 webpack 教程，但是我发现还可以做更多的事情，所以这里我要将这个项目做成 webpack 手册，您可以来这里找到任何想要的 webpack 配置
+
+本文从下面几个课题来实现