1-4完成

2022-01-04 14:20:35 +08:00 · 2022-01-04 14:20:35 +08:00 · dad49e2e90
commit dad49e2e90
parent b425ba6176
36 changed files with 45010 additions and 90 deletions
--- a/npx/1.json
+++ b/npx/1.json
@ -0,0 +1,5 @@
+{
+  "a": 1,
+  "b": 2,
+  "c": [1, 2, 3]
+}
--- a/npx/proj1/dist/main.js
+++ b/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)}]);
--- a/npx/proj1/package-lock.json
+++ b/npx/proj1/package-lock.json
--- a/npx/proj1/package.json
+++ b/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"
+  }
+}
--- a/npx/proj1/src/index.js
+++ b/npx/proj1/src/index.js
@ -0,0 +1 @@
+console.log(123);
--- a/npx/proj2/dist/main.js
+++ b/npx/proj2/dist/main.js
@ -0,0 +1 @@
+console.log(123);
--- a/npx/proj2/package-lock.json
+++ b/npx/proj2/package-lock.json
--- a/npx/proj2/package.json
+++ b/npx/proj2/package.json
@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1"
+  }
+}
--- a/npx/proj2/src/index.js
+++ b/npx/proj2/src/index.js
@ -0,0 +1 @@
+console.log(123);
--- a/npx/课件.md
+++ b/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-包名
+```
+
--- a/ESLint/eslint-airbnb/.eslintrc.js
+++ b/ESLint/eslint-airbnb/.eslintrc.js
@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'airbnb',
+};
--- a/ESLint/eslint-airbnb/package-lock.json
+++ b/ESLint/eslint-airbnb/package-lock.json
--- a/ESLint/eslint-airbnb/package.json
+++ b/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"
+  }
+}
--- a/ESLint/eslint-airbnb/src/1.js
+++ b/ESLint/eslint-airbnb/src/1.js
@ -0,0 +1,5 @@
+let a = 1;
+
+if (a === 1) {
+  a *= 2;
+}
--- a/ESLint/eslint-basic/.eslintrc.js
+++ b/ESLint/eslint-basic/.eslintrc.js
@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    eqeqeq: 'error',
+  },
+};
--- a/ESLint/eslint-basic/package-lock.json
+++ b/ESLint/eslint-basic/package-lock.json
--- a/ESLint/eslint-basic/package.json
+++ b/ESLint/eslint-basic/package.json
@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "lint": "eslint ./src/**"
+  },
+  "devDependencies": {
+    "eslint": "^8.1.0"
+  }
+}
--- a/ESLint/eslint-basic/src/index.js
+++ b/ESLint/eslint-basic/src/index.js
@ -0,0 +1,4 @@
+var a = 1;
+
+if (a == 1) {
+}
--- a/ESLint/vue-app/.browserslistrc
+++ b/ESLint/vue-app/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/ESLint/vue-app/.editorconfig
+++ b/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
--- a/ESLint/vue-app/.eslintrc.js
+++ b/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',
+  },
+};
--- a/ESLint/vue-app/.gitignore
+++ b/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?
--- a/ESLint/vue-app/README.md
+++ b/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/).
--- a/ESLint/vue-app/babel.config.js
+++ b/ESLint/vue-app/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};
--- a/ESLint/vue-app/package-lock.json
+++ b/ESLint/vue-app/package-lock.json
--- a/ESLint/vue-app/package.json
+++ b/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"
+  }
+}
--- a/ESLint/vue-app/public/favicon.ico
+++ b/ESLint/vue-app/public/favicon.ico
--- a/ESLint/vue-app/public/index.html
+++ b/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>
--- a/ESLint/vue-app/src/App.vue
+++ b/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>
--- a/ESLint/vue-app/src/assets/logo.png
+++ b/ESLint/vue-app/src/assets/logo.png
--- a/ESLint/vue-app/src/components/HelloWorld.vue
+++ b/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>
--- a/ESLint/vue-app/src/main.js
+++ b/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');
--- a/ESLint/课件.md
+++ b/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错误提示
--- a/关于webpack的诸多问题/课件.md
+++ b/关于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核心功能」和第五章「性能优化」。
+
+
+
--- a/工程化面试题汇总.md
+++ b/工程化面试题汇总.md
@ -43,8 +43,6 @@

 4. webpack 中的 loader 属性和 plugins 属性的区别是什么？

-   > 直播讲解
-
   > 参考答案：
   >
   > 它们都是 webpack 功能的扩展点。
@ -52,11 +50,9 @@
   > loader 是加载器，主要用于代码转换，比如 JS 代码降级，CSS 预编译、模块化等
   >
   > plugins 是插件，webpack 打包流程中每个环节都提供了钩子函数，可以利用这些钩子函数参与到打包生命周期中，更改或增加 webpack 的某些功能，比如生成页面和 css 文件、压缩打包结果等
-
+   
 5. webpack 的核心概念都有哪些？

-   > 直播讲解
-
   > 参考答案：
   >
   > - loader
@ -94,7 +90,7 @@
   > - dev server
   >
   >   开发服务器。在开发环境中搭建的临时服务器，用于承载对打包结果的访问
-
+   
 6. commonjs 和 es6 模块的区别是什么？

   > 参考答案：
@ -107,16 +103,12 @@

 7. ES6 中如何实现模块化的异步加载？

-   > 直播讲解
-
   > 参考答案：
   >
   > 使用动态导入即可，导入后，得到的是一个 Promise，完成后，得到一个模块对象，其中包含了所有的导出结果。

 8. 说一下 webpack 中的几种 hash 的实现原理是什么？

-   > 直播讲解
-
   > 参考答案：
   >
   > - hash
@ -130,23 +122,19 @@
   > - contenthash
   >
   >   每个文件内容单独的 hash 值，它和打包结果文件内容有关，只要文件内容不变，contenthash 不变。
-
+   
 9. webpack 如果使用了 hash 命名，那是每次都会重新生成 hash 吗？

-   > 直播讲解
-
   > 参考答案：
   >
   > 不会。它跟关联的内容是否有变化有关系，如果没有变化，hash 就不会变。具体来说，contenthash 和具体的打包文件内容有关，chunkhash 和某一 entry 为起点的打包过程中涉及的内容有关，hash 和整个工程所有模块内容有关。
-
+   
 10. webpack 中是如何处理图片的？ （抖音直播）

-    > 直播讲解
-
    > 参考答案：
    >
    > webpack 本身不处理图片，它会把图片内容仍然当做 JS 代码来解析，结果就是报错，打包失败。如果要处理图片，需要通过 loader 来处理。其中，url-loader 会把图片转换为 base64 编码，然后得到一个 dataurl，file-loader 则会将图片生成到打包目录中，然后得到一个资源路径。但无论是哪一种 loader，它们的核心功能，都是把图片内容转换成 JS 代码，因为只有转换成 JS 代码，webpack 才能识别。
-
+    
 11. webpack 打包出来的 html 为什么 style 放在头部 script 放在底部？

    > 说明：这道题的表述是有问题的，webpack 本身并不打包 html，相反，它如果遇到 html 代码会直接打包失败，因为 webpack 本身只能识别 JS。之所以能够打包出 html 文件，是因为插件或 loader 的作用，其中，比较常见的插件是 html-webpack-plugin。所以这道题的正确表述应该是：「html-webpack-plugin 打包出来的 html 为什么 style 放在头部 script 放在底部？」
@ -187,15 +175,13 @@
    > 2. 删除
    >
    >    之后在 Uglifyjs (或者其他类似的工具) 步骤进行代码精简，把标记为无用的代码删除。
-
+    
 14. 说一下 webpack loader 的作用是什么？

-    > 直播讲解
-
    > 参考答案：
    >
    > 用于转换代码。有时是因为 webpack 无法识别某些内容，比如图片、css 等，需要由 loader 将其转换为 JS 代码。有时是因为某些代码需要被特殊处理，比如 JS 兼容性的处理，需要由 loader 将其进一步转换。不管是什么情况，loader 的作用只有一个，就是转换代码。
-
+    
 15. 在开发过程中如果需要对已有模块进行扩展，如何进行开发保证调用方不受影响？

    > 参考答案：
@ -211,7 +197,7 @@
    > 在开发项目时，让项目依赖模块的主版本，因此，当模块更新时，只要不是主版本更新，项目都可以非常方便的升级模块版本，无须改动任何代码。但若涉及主版本更新，项目可以完全无视此次版本更新，仍然使用之前的旧版本，无须改动任何代码；当然也可以升级主版本，但就会涉及代码的改动，这就好比跟将 vue2 升级到 vue3 会涉及大量改动一样。
    >
    > 而在开发模块时，在一开始就要精心设计 API，尽量保证 API 的接口稳定，不要经常变动主版本号。如果实在要更新主版本，就需要在一段时间内同时维护两个版本（新的主版本，旧的主版本），给予其他项目一定的升级时间。
-
+    
 16. export 和 export default 的区别是什么？

    > 参考答案：
@ -222,8 +208,6 @@

 17. webpack 打包原理是什么？

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. **初始化参数**：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
@ -233,11 +217,9 @@
    > 5. **完成模块编译**：在经过第 4 步使用 `loader` 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的 `依赖关系图`
    > 6. **输出资源**：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 `Chunk`，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
    > 7. **输出完成**：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
-
+    
 18. webpack 热更新原理是什么？

-    > 直播讲解
-
    > 参考答案：
    >
    > 当开启热更新后，页面中会植入一段 websocket 脚本，同时，开发服务器也会和客户端建立 websocket 通信，当源码发生变动时，webpack 会进行以下处理：
@ -249,11 +231,9 @@
    > 5. 客户端再次用过去的 hash 值，以 JSONP 的方式请求变动的模块
    > 6. 服务器响应一个函数调用，用于更新模块的代码
    > 7. 此时，模块代码已经完成更新。客户端按照之前的监听配置，执行相应模块变动后的回调函数。
-
+    
 19. 如何优化 webpack 的打包速度？

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. noParse
@ -279,19 +259,15 @@
    > 6. 动态链接库
    >
    >    对于某些需要打包的第三方库，可以使用 dll 的方式单独对其打包，然后 DLLPlugin 将其整合到当前项目中，这样就避免了在开发中频繁去打包这些库
-
+    
 20. webpack 如何实现动态导入？

-    > 直播讲解
-
    > 参考答案：
    >
    > 当遇到代码中包含动态导入语句时，webpack 会将导入的模块及其依赖分配到单独的一个 chunk 中进行打包，形成单独的打包结果。而动态导入的语句会被编译成一个普通的函数调用，该函数在执行时，会使用 JSONP 的方式动态的把分离出去的包加载到模块集合中。
-
+    
 21. 说一下 webpack 有哪几种文件指纹

-    > 直播讲解
-
    > 参考答案：
    >
    > - hash
@ -305,7 +281,7 @@
    > - contenthash
    >
    >   每个文件内容单独的 hash 值，它和打包结果文件内容有关，只要文件内容不变，contenthash 不变。
-
+    
 22. 常用的 webpack Loader 都有哪些？

    > 参考答案：
@ -338,17 +314,13 @@

 24. 使用 babel-loader 会有哪些问题，可以怎样优化？

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. 如果不做特殊处理，babel-loader 会对所有匹配的模块进行降级，这对于那些已经处理好兼容性问题的第三方库显得多此一举，因此可以使用 exclude 配置排除掉这些第三方库
    > 2. 在旧版本的 babel-loader 中，默认开启了对 ESM 的转换，这样会导致 webpack 的 tree shaking 失效，因为 tree shaking 是需要保留 ESM 语法的，所以需要关闭 babel-loader 的 ESM 转换，在其新版本中已经默认关闭了。
-
+    
 25. babel 是如何对 class 进行编译的？

-    > 直播讲解
-
    > 参考答案：
    >
    > 本质上就是把 class 语法转换成普通构造函数定义，并做了以下处理：
@ -356,19 +328,17 @@
    > 1. 增加了对 this 指向的检测
    > 2. 将原型方法和静态方法变为不可枚举
    > 3. 将整个代码放到了立即执行函数中，运行后返回构造函数本身
-
+    
 26. 解释一下 babel-polyfill 的作用是什么？

-    > 直播讲解
-
    > 说明：
    >
    > babel-polyfill 已经是一个非常古老的项目了，babel 从 7.4 版本开始已不再支持它，转而使用更加强大的 core-js，此题也适用于问「core-js 的作用是什么」
-
+    
    > 参考答案：
    >
    > 默认情况下，babel 本身只转换新的语法，而不对新的 API 进行处理。由于旧的环境中无法支持新的 API，比如 IE6 无法支持 fetch api，这就需要一个补丁，用旧语言的特性实现一遍新的 API，babel-polyfill 就是用来做这件事的。
-
+    
 27. 解释一下 less 的&的操作符是做什么用的？

    > 参考答案：
@ -377,8 +347,6 @@

 28. 在前端工程化中，可以进行哪些方面的优化？

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. 对传输性能的优化
@ -450,11 +418,9 @@
    >    - HMR
    >
    >      使用热替换避免页面刷新导致的状态丢失，提升开发体验
-
+    
 29. 如果有一个工程打包特别大-如何进行优化？

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. CDN
@ -482,11 +448,9 @@
    > 7. 环境适配
    >
    >    有些打包结果中包含了大量兼容性处理的代码，但在新版本浏览器中这些代码毫无意义。因此，可以把浏览器分为多个层次，为不同层次的浏览器给予不同的打包结果。
-
+    
 30. webpack 怎么进行首屏加载的优化？

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. CDN
@ -514,7 +478,7 @@
    > 7. 环境适配
    >
    >    有些打包结果中包含了大量兼容性处理的代码，但在新版本浏览器中这些代码毫无意义。因此，可以把浏览器分为多个层次，为不同层次的浏览器给予不同的打包结果。
-
+    
 31. 介绍一下 webpack scope hoisting？

    > 直播讲解
@ -549,8 +513,6 @@

 33. 组件发布的是不是所有依赖这个组件库的项目都需要升级？

-    > 直播讲解
-
    > 参考答案：
    >
    > 实际上就是一个版本管理的问题。
@ -564,7 +526,7 @@
    > 在开发项目时，让项目依赖模块的主版本，因此，当模块更新时，只要不是主版本更新，项目都可以非常方便的升级模块版本，无须改动任何代码。但若涉及主版本更新，项目可以完全无视此次版本更新，仍然使用之前的旧版本，无须改动任何代码；当然也可以升级主版本，但就会涉及代码的改动，这就好比跟将 vue2 升级到 vue3 会涉及大量改动一样。
    >
    > 而在开发模块时，在一开始就要精心设计 API，尽量保证 API 的接口稳定，不要经常变动主版本号。如果实在要更新主版本，就需要在一段时间内同时维护两个版本（新的主版本，旧的主版本），给予其他项目一定的升级时间。
-
+    
 34. 开发过程中，如何进行公共组件的设计？（字节跳动）

    > 参考答案：
@ -589,8 +551,6 @@

 35. 说一下项目里有做过哪些 webpack 上的优化（字节跳动）

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. 对传输性能的优化
@ -662,11 +622,9 @@
    >    - HMR
    >
    >      使用热替换避免页面刷新导致的状态丢失，提升开发体验
-
+    
 36. 具体说一下 splitchunksplugin 的使用场景及使用方法。（字节跳动）

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. 公共模块
@ -680,11 +638,9 @@
    >    由于 HTML5 支持 defer 和 async，因此可以同时下载多个 JS 文件以充分利用带宽。如果打包结果是一个很大的文件，就无法利用到这一点。
    >
    >    可以利用 splitchunks 插件将文件进行拆分，通过配置 maxSize 属性指定包体积达到多大时进行拆分
-
+    
 37. 描述一下 webpack 的构建流程？（CVTE）

-    > 直播讲解
-
    > 参考答案：
    >
    > 1. **初始化参数**：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
@ -694,17 +650,15 @@
    > 5. **完成模块编译**：在经过第 4 步使用 `loader` 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的 `依赖关系图`
    > 6. **输出资源**：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 `Chunk`，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
    > 7. **输出完成**：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
-
+    
 38. 解释一下 webpack 插件的实现原理？（CVTE）

-    > 直播讲解
-
    > 参考答案：
    >
    > 本质上，webpack 的插件是一个带有`apply`函数的对象。当 webpack 创建好 compiler 对象后，会执行注册插件的 apply 函数，同时将 compiler 对象作为参数传入。
    >
    > 在 apply 函数中，开发者可以通过 compiler 对象监听多个钩子函数的执行，不同的钩子函数对应 webpack 编译的不同阶段。当 webpack 进行到一定阶段后，会调用这些监听函数，同时将 compilation 对象传入。开发者可以使用 compilation 对象获取和改变 webpack 的各种信息，从而影响构建过程。
-
+    
 39. 有用过哪些插件做项目的分析吗？（CVTE）

    > 参考答案：
@ -713,14 +667,12 @@

 40. 什么是 babel，有什么作用？

-    > 直播讲解
-
    > 参考答案：
    >
    > babel 是一个 JS 编译器，主要用于将下一代的 JS 语言代码编译成兼容性更好的代码。
    >
    > 它其实本身做的事情并不多，它负责将 JS 代码编译成为 AST，然后依托其生态中的各种插件对 AST 中的语法和 API 进行处理
-
+    
 41. 解释一下 npm 模块安装机制是什么？

    > 直播讲解
--- a/知识图谱.drawio
+++ b/知识图谱.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>
				`@ -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)}]);