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需要安装?