2.8.6小节习题、关键字添加

data/2.Vue中阶/5.Axios/1.基本用法/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "5d42d6e847b7470eba4c4f08ffa51079"

data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "b96c67c2273849ec99e6fed0d48f091b"

data/2.Vue中阶/5.Axios/3.拦截器、取消请求/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "00e895ceea48452ab5656bbf216f738b"

data/2.Vue中阶/5.Axios/4.请求跨域/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "ac8f3093d39b48eeb1b92276fd5599cc"

data/2.Vue中阶/8.webpack打包工具/1.前端模块化/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "211d46b4c3e94f37b8a817ab6c18fce5"

data/2.Vue中阶/8.webpack打包工具/2.webpack是什么/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "72f31b4d6b194ab68dd7a2f65c2a5c01"

data/2.Vue中阶/8.webpack打包工具/3.安装webpack/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "b2ef981f462d41918ee5f2b6d8d29fbe"

data/2.Vue中阶/8.webpack打包工具/4.安装webpack/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "73b6d3521d6e42e28301ea7885df0b7d"

data/2.Vue中阶/8.webpack打包工具/5.webpack的基本使用/exercises.json

 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "d3140697fada41c4978d4947dc391733"

data/2.Vue中阶/8.webpack打包工具/6.webpack的相关配置/config.json

+{
+  "node_id": "vue-35b90aa83701425696c832b4da590cc6",
+  "keywords": [
+    "webpack的相关配置",
+    "webpack配置"
+  ],
+  "children": [],
+  "export": [
+    "exercises.json"
+  ],
+  "keywords_must": [
+    "webpack"
+  ],
+  "keywords_forbid": []
+}
\ No newline at end of file

data/2.Vue中阶/8.webpack打包工具/6.webpack的相关配置/exercises.json

+{
+  "type": "code_options",
+  "author": null,
+  "source": "exercises.md",
+  "notebook_enable": false,
+  "exercise_id": "f288e76b11f24f40872cc190f1f1eeb6"
+}
\ No newline at end of file

data/2.Vue中阶/8.webpack打包工具/6.webpack的相关配置/exercises.md

+# webpack的相关配置
+
+ <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
+<br>
+
+**设置webpack的打包入口/出口**
+<br>
+在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件，默认会将dist/main.js 作为默认的打包输出js文件，如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：
+
+```javascript
+const path = require("path");
+module.exports = {
+    mode:"development",
+    //设置入口文件路径
+    entry: path.join(__dirname,"./src/xx.js"),
+    //设置出口文件
+    output:{
+        //设置路径
+        path:path.join(__dirname,"./dist"),
+        //设置文件名
+        filename:"res.js"
+    }
+}
+```
+
+**设置webpack的自动打包**
+<br>
+默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件，那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作。实现自动打包功能的步骤如下：
+<br>
+1.安装自动打包功能的包:webpack-dev-server
+>npm install webpack-dev-server -D
+>
+2.修改package.json中的dev指令如下：
+
+```javascript
+"scripts":{
+            "dev":"webpack-dev-server"
+        }
+```
+
+3.将引入的js文件路径更改为：
+
+```javascript
+<script src="/bundle.js"></script>
+```
+
+4.运行npm run dev，进行打包
+<br>
+5.打开网址查看效果：http://localhost:8080
+
+<br>
+**注意：**
+webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中。
+**补充：**
+在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：
+```javascript
+ "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
+```
+**配置html-webpack-plugin**
+<br>
+
+>使用html-webpack-plugin 可以生成一个预览页面。
+
+因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面,还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
+
+<br>
+实现默认预览页面功能的步骤如下：
+<br>
+1.安装默认预览功能的包:html-webpack-plugin
+<br>
+
+>npm install html-webpack-plugin -D
+
+2.修改webpack.config.js文件，如下：
+
+```javascript
+//导入包
+        const HtmlWebpackPlugin = require("html-webpack-plugin");
+        //创建对象
+        const htmlPlugin = new HtmlWebpackPlugin({
+            //设置生成预览页面的模板文件
+            template:"./src/index.html",
+            //设置生成的预览页面名称
+            filename:"index.html"
+        })
+```
+3.继续修改webpack.config.js文件，添加plugins信息：
+
+```javascript
+module.exports = {
+            ......
+            plugins:[ htmlPlugin ]
+        }
+```
+**webpack中的加载器**
+<br>
+通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包
+<br>
+    loader加载器包含：
+        1).less-loader
+        2).sass-loader
+        3).url-loader:打包处理css中与url路径有关的文件
+        4).babel-loader:处理高级js语法的加载器
+        5).postcss-loader
+        6).css-loader,style-loader
+
+<br>
+注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用
+
+
+
+<br>
+
+ <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
+
+如果项目中处理css需要安装?<br/><br/>
+
+## 答案
+
+css-loader、style-loader
+
+## 选项
+
+### A
+
+style-loader、sass-loder
+
+### B
+
+sass-loader
+
+### C
+css-loader、sass-loder

data/tree.json

@@ -987,7 +987,10 @@
                   {
                     "前端模块化": {
                       "node_id": "vue-0475f47465fa439aa1b67eef8b281b51",
-                      "keywords": [],
+                      "keywords": [
+                        "前端模块化",
+                        "js模块化"
+                      ],
                       "children": [],
                       "keywords_must": [],
                       "keywords_forbid": []
@@ -996,9 +999,14 @@
                   {
                     "webpack是什么": {
                       "node_id": "vue-592ae91f67a443dca4b80a9611360c0a",
-                      "keywords": [],
+                      "keywords": [
+                        "webpack是什么",
+                        "什么是webpack"
+                      ],
                       "children": [],
-                      "keywords_must": [],
+                      "keywords_must": [
+                        "webpack"
+                      ],
                       "keywords_forbid": []
                     }
                   },
@@ -1011,21 +1019,43 @@
                       "keywords_forbid": []
                     }
                   },
+                  {
+                    "安装webpack": {
+                      "node_id": "vue-35b90aa83701425696c832b4da590cc6",
+                      "keywords": [
+                        "安装webpack"
+                      ],
+                      "children": [],
+                      "keywords_must": [
+                        "webpack"
+                      ],
+                      "keywords_forbid": []
+                    }
+                  },
                   {
                     "webpack的基本使用": {
                       "node_id": "vue-35b90aa83701425696c832b4da590cc6",
-                      "keywords": [],
+                      "keywords": [
+                        "webpack的基本使用"
+                      ],
                       "children": [],
-                      "keywords_must": [],
+                      "keywords_must": [
+                        "webpack"
+                      ],
                       "keywords_forbid": []
                     }
                   },
                   {
                     "webpack的相关配置": {
                       "node_id": "vue-35b90aa83701425696c832b4da590cc6",
-                      "keywords": [],
+                      "keywords": [
+                        "webpack的相关配置",
+                        "webpack配置"
+                      ],
                       "children": [],
-                      "keywords_must": [],
+                      "keywords_must": [
+                        "webpack"
+                      ],
                       "keywords_forbid": []
                     }
                   }