diff --git "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226/exercises.md"
index 70ecda1626f8486f614ab37e58dea5fedc13f39c..30e393261881da6b4cc5b4cf45ee5979389d9f21 100644
--- "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226/exercises.md"
@@ -3,7 +3,8 @@
小常识:
什么是模块化?模块化方法是一种软件开发方法,是把一个待开发的软件分解成若干小的简单的部分,采用对复杂事物分而治之的经典原则 。模块化方法涉及的主要问题是:模块设计的规则,系统如何分解成模块。每一模块都可独立开发、测试,最后再组装成整个软件。对一个规约进行分解,以得到模块系统结构的方法有数据结构设计法、功能分解法、数据流设计、面向对象的设计等。
-
+
+
把代码进行模块化拆分的好处:
① 提高了代码的复用性
② 提高了代码的可维护性
@@ -11,7 +12,7 @@
- 小测试:
+ 小测试:
下列不属于目前流行的js模块化规范的是?
diff --git "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/2.webpack\346\230\257\344\273\200\344\271\210/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/2.webpack\346\230\257\344\273\200\344\271\210/exercises.md"
index afd3c80a8fb478a0cc44ad121413a4a2bc5a1c74..b99e60cc0eda92f2c000e4a95c28f747763d9880 100644
--- "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/2.webpack\346\230\257\344\273\200\344\271\210/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/2.webpack\346\230\257\344\273\200\344\271\210/exercises.md"
@@ -4,17 +4,16 @@
Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理,它将根据模块的依赖关系进行静态分析,生成对应的静态资源。
-
-
-![在这里插入图片描述](https://img-blog.csdnimg.cn/cd5f91cc2e074cdda7def25d28610b63.png)
+
+
webpack可以解决目前web开发的困境。他的核心概念是一个模块打包工具,它的主要目标是将js文件打包在一起,打包后的文件用于在浏览器中使用,但它也能胜任转换(transform)、打包(bundle)或包裹(package)任何其他资源。
webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性。
- 小测试:
+ 小测试:
根据上方小常识补全概念:Webpack 是一种`(__1__)`,一个`(__2__)`。
diff --git "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/3.\345\256\211\350\243\205webpack/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/3.\345\256\211\350\243\205webpack/exercises.md"
index 33de1e289c82e10275a86812eb32a3162a340a9d..a16f76b3035e5a72c7ba3ddfef9e541146d91c13 100644
--- "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/3.\345\256\211\350\243\205webpack/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/3.\345\256\211\350\243\205webpack/exercises.md"
@@ -1,61 +1,10 @@
# 安装webpack
- 小常识:
-
-1.打开项目目录终端,输入命令:
-
-```javascript
-npm install webpack webpack-cli -D
-```
-
-2.然后在项目根目录中,创建一个 webpack.config.js 的配置文件用来配置webpack
-
-在 webpack.config.js 文件中编写代码进行webpack配置,如下:
-
-```javascript
-module.exports = {
- mode:"development"//可以设置为development(开发模式),production(发布模式)
-}
-```
-
-补充:mode设置的是项目的编译模式。
-
-如果设置为development则表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些,如果设置为production则表示项目处于上线发布阶段,会进行压缩和混淆,打包速度会慢一些
-
-3. 修改项目中的package.json文件添加运行脚本dev,如下:
-
-```javascript
-"scripts":{
- "dev":"webpack"
-}
-```
-
-
-注意:scripts节点下的脚本,可以通过 npm run 运行,如:
-
-```javascript
-运行终端命令:npm run dev
-```
-
-将会启动webpack进行项目打包
-
-4. 运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件
-打开项目目录终端,输入命令:
-
-```javascript
-npm run dev
-```
-
-等待webpack打包完毕之后,找到默认的dist路径中生成的main.js文件,将其引入到html页面中。
-
-
-
- 小测试:
-
-在webpack 4.x中,默认会将src/index.js 作为默认的打包入口js文件,默认会将dist/main.js 作为默认的打包输出js文件,如果不想使用默认的入口/出口js文件我们如何设置?
+在webpack 4.x中,默认会将 src/index.js 作为默认的打包入口js文件,默认会将dist/main.js 作为默认的打包输出js文件,如果不想使用默认的入口/出口js文件我们如何设置?
## 答案
+
通过设置 webpack.config.js
```javascript
const path = require("path");
diff --git "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/4.webpack\347\232\204\345\237\272\346\234\254\344\275\277\347\224\250/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/4.webpack\347\232\204\345\237\272\346\234\254\344\275\277\347\224\250/exercises.md"
index 22d4f61d6c4eacf00dea0d5ccc147993dc9d9794..e3fa7eb2143b56e2cb078d6bfa076a9ce1b2720b 100644
--- "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/4.webpack\347\232\204\345\237\272\346\234\254\344\275\277\347\224\250/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/4.webpack\347\232\204\345\237\272\346\234\254\344\275\277\347\224\250/exercises.md"
@@ -1,102 +1,22 @@
# webpack的基本使用
- 小常识:
-
-**项目目录并初始化**
-
-创建项目,并打开项目所在目录的终端,输入命令:
-
- > npm init -y
-
-**创建首页及js文件**
-
-在项目目录中创建index.html页面,并初始化页面结构:在页面中摆放一个ul,ul里面放置几个li,在项目目录中创建js文件夹,并在文件夹中创建index.js文件
-
-**以jQuery为例安装jQuery**
-
-打开项目目录终端,输入命令:
->npm install jQuery -S
-
-**导入jQuery**
-
-打开index.js文件,编写代码导入jQuery并实现功能:
-
-```javascript
-import $ from "jquery";
-$(function(){
- $("li:odd").css("background","cyan");
- $("li:odd").css("background","pink");
-})
-```
-注意:此时项目运行会有错误,因为`import $ from "jquery"`;这句代码属于ES6的新语法代码,在浏览器中可能会存在兼容性问题,所以我们需要webpack来帮助我们解决这个问题。
-
-**安装webpack**
-
-1.打开项目目录终端,输入命令:
-
-```javascript
-npm install webpack webpack-cli -D
-```
-
-2.然后在项目根目录中,创建一个 webpack.config.js 的配置文件用来配置webpack
-
-在 webpack.config.js 文件中编写代码进行webpack配置,如下:
-
-```javascript
-module.exports = {
- mode:"development"
-}
-```
-
-补充:mode设置的是项目的编译模式。
-
-3. 修改项目中的package.json文件添加运行脚本dev,如下:
-
-```javascript
-"scripts":{
- "dev":"webpack"
-}
-```
-
-
-注意:scripts节点下的脚本,可以通过 npm run 运行,如:
-
-```javascript
-运行终端命令:npm run dev
-```
-
-将会启动webpack进行项目打包
-
-4. 运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件
-打开项目目录终端,输入命令:
-
-```javascript
-npm run dev
-```
-
-等待webpack打包完毕之后,找到默认的dist路径中生成的main.js文件,将其引入到html页面中。浏览页面查看效果。
-
-
-
- 小测试:
-
-关于webpack.config.js中的mode的参数描述正确的是?
+关于webpack的基本使用描述不正确的是?
## 答案
-参数可以设置为development,则表示项目处于开发阶段,不会进行压缩和混淆;
+webpack 的入口起点默认是 `./src/index.js`,不可修改。
## 选项
### A
-参数可以设置为production,则表示项目处于开发阶段,不会进行压缩和混淆;
+output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 `./dist/main.js`,其他生成文件默认放置在 `./dist` 文件夹中。
### B
-development会进行压缩和混淆,会比production打包速度慢一些
+webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 可以让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
### C
-不可以设置
\ No newline at end of file
+通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
\ No newline at end of file
diff --git "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/5.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/5.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.md"
index 9fe60147aeb12baeba74351a1c862956aa531640..28e1c7e7c0610ae0d4a3cd33e3226d20f674ae44 100644
--- "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/5.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/5.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.md"
@@ -1,117 +1,5 @@
# webpack的相关配置
- 小常识:
-
-
-**设置webpack的打包入口/出口**
-
-在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的自动打包**
-
-默认情况下,我们更改入口js文件的代码,需要重新运行命令打包webpack,才能生成出口的js文件,那么每次都要重新执行命令打包,这是一个非常繁琐的事情,那么,自动打包可以解决这样繁琐的操作。实现自动打包功能的步骤如下:
-
-1.安装自动打包功能的包:webpack-dev-server
->npm install webpack-dev-server -D
->
-2.修改package.json中的dev指令如下:
-
-```javascript
-"scripts":{
- "dev":"webpack-dev-server"
- }
-```
-
-3.将引入的js文件路径更改为:
-
-```javascript
-
-```
-
-4.运行npm run dev,进行打包
-
-5.打开网址查看效果:http://localhost:8080
-
-
-**注意:**
-webpack-dev-server自动打包的输出文件,默认放到了服务器的根目录中。
-**补充:**
-在自动打包完毕之后,默认打开服务器网页,实现方式就是打开package.json文件,修改dev命令:
-```javascript
- "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
-```
-**配置html-webpack-plugin**
-
-
->使用html-webpack-plugin 可以生成一个预览页面。
-
-因为当我们访问默认的 http://localhost:8080/的时候,看到的是一些文件和文件夹,想要查看我们的页面,还需要点击文件夹点击文件才能查看,那么我们希望默认就能看到一个页面,而不是看到文件夹或者目录。
-
-
-实现默认预览页面功能的步骤如下:
-
-1.安装默认预览功能的包:html-webpack-plugin
-
-
->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中的加载器**
-
-通过loader打包非js模块:默认情况下,webpack只能打包js文件,如果想要打包非js文件,需要调用loader加载器才能打包
-
- loader加载器包含:
- 1).less-loader
- 2).sass-loader
- 3).url-loader:打包处理css中与url路径有关的文件
- 4).babel-loader:处理高级js语法的加载器
- 5).postcss-loader
- 6).css-loader,style-loader
-
-
-注意:指定多个loader时的顺序是固定的,而调用loader的顺序是从后向前进行调用
-
-
-
-
-
- 小测试:
如果项目中处理css需要安装?