From a601fafbcf774dd4c1bfde3420681d84602f2223 Mon Sep 17 00:00:00 2001 From: zhaoshuangshi Date: Thu, 16 Feb 2023 10:16:41 +0800 Subject: [PATCH] =?UTF-8?q?2-6=E4=B8=8B=E9=9D=A2=E6=89=80=E6=9C=89?= =?UTF-8?q?=E4=B9=A0=E9=A2=98=E4=BC=98=E5=8C=96=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.md" | 5 +- .../exercises.md" | 7 +- .../exercises.md" | 55 +-------- .../exercises.md" | 90 +------------- .../exercises.md" | 112 ------------------ 5 files changed, 13 insertions(+), 256 deletions(-) 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 70ecda1..30e3932 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 afd3c80..b99e60c 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 33de1e2..a16f76b 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 22d4f61..e3fa7eb 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 9fe6014..28e1c7e 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需要安装?

-- GitLab