1-4完成

02. npx/1.json

@@ -0,0 +1,5 @@
+{
+  "a": 1,
+  "b": 2,
+  "c": [1, 2, 3]
+}

02. npx/proj1/dist/main.js

@@ -0,0 +1 @@
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log(123)}]);

02. npx/proj1/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "prettyjson": "^1.2.1",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.9.1"
+  }
+}

02. npx/proj1/src/index.js

@@ -0,0 +1 @@
+console.log(123);

02. npx/proj2/dist/main.js

@@ -0,0 +1 @@
+console.log(123);

02. npx/proj2/package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1"
+  }
+}

02. npx/proj2/src/index.js

@@ -0,0 +1 @@
+console.log(123);

02. npx/课件.md

@@ -0,0 +1,46 @@
+# 运行本地命令
+
+使用`npx 命令`时，它会首先从本地工程的`node_modules/.bin`目录中寻找是否有对应的命令
+
+例如：
+
+```shell
+npx webpack
+```
+
+上面这条命令寻找本地工程的`node_modules/.bin/webpack`
+
+如果将命令配置到`package.json`的`scripts`中，可以省略`npx`
+
+# 临时下载执行
+
+当执行某个命令时，如果无法从本地工程中找到对应命令，则会把命令对应的包下载到一个临时目录，下载完成后执行，临时目录中的命令会在适当的时候删除
+
+例如：
+
+```shell
+npx prettyjson 1.json
+```
+
+npx会下载`prettyjson`包到临时目录，然后运行该命令
+
+如果命令名称和需要下载的包名不一致时，可以手动指定报名
+
+例如`@vue/cli`是包名，`vue`是命令名，两者不一致，可以使用下面的命令
+
+```shell
+npx -p @vue/cli vue create vue-app
+```
+
+# npm init
+
+`npm init`通常用于初始化工程的`package.json`文件
+
+除此之外，有时也可以充当`npx`的作用
+
+```shell
+npm init 包名 # 等效于 npx create-包名
+npm init @命名空间 # 等效于 npx @命名空间/create
+npm init @命名空间/包名 # 等效于 npx @命名空间/create-包名
+```
+

03. ESLint/eslint-airbnb/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'airbnb',
+};

03. ESLint/eslint-airbnb/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "eslint-airbnb",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint-config-airbnb": "^18.2.1"
+  }
+}

03. ESLint/eslint-airbnb/src/1.js

@@ -0,0 +1,5 @@
+let a = 1;
+
+if (a === 1) {
+  a *= 2;
+}

03. ESLint/eslint-basic/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    eqeqeq: 'error',
+  },
+};

03. ESLint/eslint-basic/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "lint": "eslint ./src/**"
+  },
+  "devDependencies": {
+    "eslint": "^8.1.0"
+  }
+}

03. ESLint/eslint-basic/src/index.js

@@ -0,0 +1,4 @@
+var a = 1;
+
+if (a == 1) {
+}

03. ESLint/vue-app/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

03. ESLint/vue-app/.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

03. ESLint/vue-app/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

03. ESLint/vue-app/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

03. ESLint/vue-app/README.md

@@ -0,0 +1,24 @@
+# vue-app
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

03. ESLint/vue-app/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};

03. ESLint/vue-app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vue-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

03. ESLint/vue-app/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

03. ESLint/vue-app/src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

03. ESLint/vue-app/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

03. ESLint/vue-app/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');

03. ESLint/课件.md

@@ -0,0 +1,121 @@
+> ESLint官网：https://eslint.org/
+>
+> ESLint民间中文网：https://eslint.bootcss.com/
+
+# ESLint的由来
+
+JavaScript是一个过于灵活的语言，因此在企业开发中，往往会遇到下面两个问题：
+
+- 如何让所有员工书写高质量的代码？
+
+  比如使用`===`替代`==`
+
+- 如何让所有员工书写的代码风格保持统一？
+
+  比如字符串统一使用单引号
+
+上面两个问题，一个代表着代码的质量，一个代表着代码的风格。
+
+如果纯依靠人工进行检查，不仅费时费力，而且还容易出错。
+
+ESLint由此诞生，它是一个工具，**预先配置好各种规则**，通过这些规则来自动化的验证代码，甚至自动修复
+
+<img src="http://mdrs.yuanjin.tech/img/20211103145845.png" alt="image-20211103145844948" style="zoom:50%;" />
+
+# ESLint的基本使用
+
+## 安装
+
+```shell
+npm i -D eslint
+```
+
+## 如何验证
+
+```shell
+# 验证单个文件
+npx eslint 文件名
+# 验证全部文件
+npx eslint src/**
+```
+
+## 配置规则
+
+eslint会自动寻找根目录中的配置文件，它支持三种配置文件：
+
+- `.eslintrc` JSON格式
+- `.eslintrc.js` JS格式
+- `.eslintrc.yml` YAML格式
+
+这里以`.eslintrc.js`为例：
+
+```js
+// ESLint 配置
+module.exports = {
+  // 配置规则
+  rules: {
+    规则名1: 级别,
+    规则名2: 级别,
+    ...
+  },
+};
+```
+
+每条规则由名称和级别组成
+
+**规则名称决定了要检查什么**
+
+**规则级别决定了检查没通过时的处理方式**
+
+所有的规则名称看这里：
+
+- 官方：https://eslint.org/docs/rules/
+- 中文：https://eslint.bootcss.com/docs/rules/
+
+所有级别如下：
+
+- 0 或 'off'：关闭规则
+- 1 或 'warn'：验证不通过提出警告
+- 2 或 'error'：验证不通过报错，退出程序
+
+## 在VSCode中及时发现问题
+
+每次都要输入命令发现问题非常麻烦
+
+可以安装VSCode插件**ESLint**，只要项目的node_modules中有eslint，它就会按照项目根目录下的规则自动检测
+
+## 使用继承
+
+ESLint的规则非常庞大，全部自定义过于麻烦
+
+一般我们继承其他企业开源的方案来简化配置
+
+这方面做的比较好的是一家叫Airbnb的公司，他们在开发前端项目的时候自定义了一套开源规则，受到全世界的认可
+
+我们只需要安装它即可
+
+```shell
+# 为了避免版本问题，不要直接安装eslint，直接安装下面的包，会自动安装相应版本的eslint
+npm i -D eslint-config-airbnb
+```
+
+然后稍作配置
+
+```shell
+module.exports = {
+	extends: 'airbnb' # 配置继承自 airbnb
+}
+```
+
+## 在框架中使用
+
+一般我们使用脚手架搭建工程，在搭建工程时通常都可以直接设置eslint
+
+# 企业开发的实际情况
+
+<img src="http://mdrs.yuanjin.tech/img/20211103163608.png" alt="image-20211103163608481" style="zoom:50%;" />
+
+我们要做什么？
+
+- 安装好VSCode的ESLint插件
+- 学会查看ESLint错误提示

04. 关于webpack的诸多问题/课件.md

@@ -0,0 +1,27 @@
+# 关于webpack的诸多问题
+
+## 为什么要学习webpack？
+
+前端有很多打包工具，其中，webpack生态最完整、使用最广泛。
+
+学习webpack的意义主要有以下几点：
+
+1. 理解前端开发中出现的常见问题，以及对应的解决办法
+2. 帮助理解常见的脚手架，如vue-cli、create-react-app、umi-js等
+3. 可以脱离脚手架搭建工程，甚至自己完成脚手架开发
+4. 应对工程化方面的进阶面试题
+
+## webpack学习哪个版本？
+
+截止到2022-01-04，webpack的版本是webpack5，但目前使用的最广泛的是webpack4。
+
+webpack的版本会不断更新，但它的核心原理是不变的，因此，学习webpack4成为了最好的选择。
+
+## 如何学习webpack？
+
+需要完整的学习课程「webpack详细版」
+
+学习过程中，把重心放在第一章「Webpack核心功能」和第五章「性能优化」。
+
+
+

工程化面试题汇总.md

@@ -43,8 +43,6 @@
 
 4. webpack 中的 loader 属性和 plugins 属性的区别是什么？
 
-   > 直播讲解
-
    > 参考答案：
    >
    > 它们都是 webpack 功能的扩展点。
@@ -55,8 +53,6 @@
    
 5. webpack 的核心概念都有哪些？
 
-   > 直播讲解
-
    > 参考答案：
    >
    > - loader
@@ -107,16 +103,12 @@
 
 7. ES6 中如何实现模块化的异步加载？
 
-   > 直播讲解
-
    > 参考答案：
    >
    > 使用动态导入即可，导入后，得到的是一个 Promise，完成后，得到一个模块对象，其中包含了所有的导出结果。
 
 8. 说一下 webpack 中的几种 hash 的实现原理是什么？
 
-   > 直播讲解
-
    > 参考答案：
    >
    > - hash
@@ -133,16 +125,12 @@
    
 9. webpack 如果使用了 hash 命名，那是每次都会重新生成 hash 吗？
 
-   > 直播讲解
-
    > 参考答案：
    >
    > 不会。它跟关联的内容是否有变化有关系，如果没有变化，hash 就不会变。具体来说，contenthash 和具体的打包文件内容有关，chunkhash 和某一 entry 为起点的打包过程中涉及的内容有关，hash 和整个工程所有模块内容有关。
    
 10. webpack 中是如何处理图片的？ （抖音直播）
 
-    > 直播讲解
-
     > 参考答案：
     >
     > webpack 本身不处理图片，它会把图片内容仍然当做 JS 代码来解析，结果就是报错，打包失败。如果要处理图片，需要通过 loader 来处理。其中，url-loader 会把图片转换为 base64 编码，然后得到一个 dataurl，file-loader 则会将图片生成到打包目录中，然后得到一个资源路径。但无论是哪一种 loader，它们的核心功能，都是把图片内容转换成 JS 代码，因为只有转换成 JS 代码，webpack 才能识别。
@@ -190,8 +178,6 @@
     
 14. 说一下 webpack loader 的作用是什么？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 用于转换代码。有时是因为 webpack 无法识别某些内容，比如图片、css 等，需要由 loader 将其转换为 JS 代码。有时是因为某些代码需要被特殊处理，比如 JS 兼容性的处理，需要由 loader 将其进一步转换。不管是什么情况，loader 的作用只有一个，就是转换代码。
@@ -222,8 +208,6 @@
 
 17. webpack 打包原理是什么？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. **初始化参数**：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
@@ -236,8 +220,6 @@
     
 18. webpack 热更新原理是什么？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 当开启热更新后，页面中会植入一段 websocket 脚本，同时，开发服务器也会和客户端建立 websocket 通信，当源码发生变动时，webpack 会进行以下处理：
@@ -252,8 +234,6 @@
     
 19. 如何优化 webpack 的打包速度？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. noParse
@@ -282,16 +262,12 @@
     
 20. webpack 如何实现动态导入？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 当遇到代码中包含动态导入语句时，webpack 会将导入的模块及其依赖分配到单独的一个 chunk 中进行打包，形成单独的打包结果。而动态导入的语句会被编译成一个普通的函数调用，该函数在执行时，会使用 JSONP 的方式动态的把分离出去的包加载到模块集合中。
     
 21. 说一下 webpack 有哪几种文件指纹
 
-    > 直播讲解
-
     > 参考答案：
     >
     > - hash
@@ -338,8 +314,6 @@
 
 24. 使用 babel-loader 会有哪些问题，可以怎样优化？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. 如果不做特殊处理，babel-loader 会对所有匹配的模块进行降级，这对于那些已经处理好兼容性问题的第三方库显得多此一举，因此可以使用 exclude 配置排除掉这些第三方库
@@ -347,8 +321,6 @@
     
 25. babel 是如何对 class 进行编译的？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 本质上就是把 class 语法转换成普通构造函数定义，并做了以下处理：
@@ -359,8 +331,6 @@
     
 26. 解释一下 babel-polyfill 的作用是什么？
 
-    > 直播讲解
-
     > 说明：
     >
     > babel-polyfill 已经是一个非常古老的项目了，babel 从 7.4 版本开始已不再支持它，转而使用更加强大的 core-js，此题也适用于问「core-js 的作用是什么」
@@ -377,8 +347,6 @@
 
 28. 在前端工程化中，可以进行哪些方面的优化？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. 对传输性能的优化
@@ -453,8 +421,6 @@
     
 29. 如果有一个工程打包特别大-如何进行优化？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. CDN
@@ -485,8 +451,6 @@
     
 30. webpack 怎么进行首屏加载的优化？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. CDN
@@ -549,8 +513,6 @@
 
 33. 组件发布的是不是所有依赖这个组件库的项目都需要升级？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 实际上就是一个版本管理的问题。
@@ -589,8 +551,6 @@
 
 35. 说一下项目里有做过哪些 webpack 上的优化（字节跳动）
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. 对传输性能的优化
@@ -665,8 +625,6 @@
     
 36. 具体说一下 splitchunksplugin 的使用场景及使用方法。（字节跳动）
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. 公共模块
@@ -683,8 +641,6 @@
     
 37. 描述一下 webpack 的构建流程？（CVTE）
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 1. **初始化参数**：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
@@ -697,8 +653,6 @@
     
 38. 解释一下 webpack 插件的实现原理？（CVTE）
 
-    > 直播讲解
-
     > 参考答案：
     >
     > 本质上，webpack 的插件是一个带有`apply`函数的对象。当 webpack 创建好 compiler 对象后，会执行注册插件的 apply 函数，同时将 compiler 对象作为参数传入。
@@ -713,8 +667,6 @@
 
 40. 什么是 babel，有什么作用？
 
-    > 直播讲解
-
     > 参考答案：
     >
     > babel 是一个 JS 编译器，主要用于将下一代的 JS 语言代码编译成兼容性更好的代码。

知识图谱.drawio

@@ -1,6 +1,6 @@
 <mxfile host="65bd71144e">
     <diagram id="QFoU5hE6jV3CWI5dNyLY" name="第 1 页">
-        <mxGraphModel dx="685" dy="637" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1654" pageHeight="1169" math="0" shadow="0">
+        <mxGraphModel dx="472" dy="494" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1654" pageHeight="1169" math="0" shadow="0">
             <root>
                 <mxCell id="0"/>
                 <mxCell id="1" parent="0"/>
@@ -22,33 +22,30 @@
                 <mxCell id="6" value="选择学习的知识" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=16;fontFamily=Roboto Mono;" parent="19" vertex="1">
                     <mxGeometry x="18" y="128" width="133" height="31" as="geometry"/>
                 </mxCell>
-                <mxCell id="71" value="babel" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontFamily=Roboto Mono;" parent="1" vertex="1">
-                    <mxGeometry x="688" y="512" width="137" height="31" as="geometry"/>
-                </mxCell>
                 <mxCell id="73" value="01. CMJ和ESM" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=16;fontFamily=Roboto Mono;align=left;spacingLeft=10;" parent="1" vertex="1">
                     <mxGeometry x="167" y="117" width="192" height="31" as="geometry"/>
                 </mxCell>
                 <mxCell id="102" value="postcss" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontFamily=Roboto Mono;" parent="1" vertex="1">
                     <mxGeometry x="688" y="570" width="137" height="31" as="geometry"/>
                 </mxCell>
-                <mxCell id="103" value="代码风格管理" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=16;fontFamily=Roboto Mono;" parent="1" vertex="1">
-                    <mxGeometry x="688" y="451" width="137" height="31" as="geometry"/>
-                </mxCell>
                 <mxCell id="104" value="常用构建工具" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=16;fontFamily=Roboto Mono;" parent="1" vertex="1">
                     <mxGeometry x="873" y="512" width="250" height="31" as="geometry"/>
                 </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="105" target="102" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="109" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="105" target="71" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="110" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="105" target="103" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
                 <mxCell id="105" value="webpack详细讲解" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=16;fontFamily=Roboto Mono;" parent="1" vertex="1">
                     <mxGeometry x="873" y="570" width="250" height="31" as="geometry"/>
                 </mxCell>
+                <mxCell id="111" value="02. 代码质量和风格" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=16;fontFamily=Roboto Mono;align=left;spacingLeft=10;" parent="1" vertex="1">
+                    <mxGeometry x="167" y="175" width="192" height="31" as="geometry"/>
+                </mxCell>
+                <mxCell id="112" value="03. ESLint" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=16;fontFamily=Roboto Mono;align=left;spacingLeft=10;" parent="1" vertex="1">
+                    <mxGeometry x="167" y="233" width="192" height="31" as="geometry"/>
+                </mxCell>
+                <mxCell id="113" value="04. 关于webpack的诸多问题" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontFamily=Roboto Mono;align=left;spacingLeft=10;" parent="1" vertex="1">
+                    <mxGeometry x="407" y="117" width="254" height="31" as="geometry"/>
+                </mxCell>
+                <mxCell id="116" value="05. webpack5更新了什么" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontFamily=Roboto Mono;align=left;spacingLeft=10;" vertex="1" parent="1">
+                    <mxGeometry x="395" y="493" width="254" height="31" as="geometry"/>
+                </mxCell>
             </root>
         </mxGraphModel>
     </diagram>