Skip to content

S
skill_tree_vue

CSDN 技术社区 / skill_tree_vue

通知 5
Star 2
Fork 0
S
skill_tree_vue
提交 a601fafb 编写于 作者: Z zhaoshuangshi
浏览文件
操作

2-6下面所有习题优化修改

上级 365217c7
显示空白变更内容
内联 并排
Showing with 14 addition and 257 deletion
data/2.Vue中阶/6.webpack打包工具/1.前端模块化/exercises.md
浏览文件 @ a601fafb
......@@ -3,7 +3,8 @@
<div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
<br>
什么是模块化？模块化方法是一种软件开发方法，是把一个待开发的软件分解成若干小的简单的部分，采用对复杂事物分而治之的经典原则 。模块化方法涉及的主要问题是：模块设计的规则，系统如何分解成模块。每一模块都可独立开发、测试，最后再组装成整个软件。对一个规约进行分解，以得到模块系统结构的方法有数据结构设计法、功能分解法、数据流设计、面向对象的设计等。
<br>
<br/>
把代码进行模块化拆分的好处：
① 提高了代码的复用性
② 提高了代码的可维护性
......@@ -11,7 +12,7 @@
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div><br/>
下列不属于目前流行的js模块化规范的是?<br/><br/>
......
data/2.Vue中阶/6.webpack打包工具/2.webpack是什么/exercises.md
浏览文件 @ a601fafb
......@@ -4,17 +4,16 @@
<br>
Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理，它将根据模块的依赖关系进行静态分析，生成对应的静态资源。
<br>
![在这里插入图片描述](https://img-blog.csdnimg.cn/cd5f91cc2e074cdda7def25d28610b63.png)
<br>
<br/>
webpack可以解决目前web开发的困境。他的核心概念是一个模块打包工具,它的主要目标是将js文件打包在一起,打包后的文件用于在浏览器中使用,但它也能胜任转换(transform)、打包(bundle)或包裹(package)任何其他资源。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性。
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div><br/>
根据上方小常识补全概念：Webpack 是一种`(__1__)`，一个`(__2__)`。<br/><br/>
......
data/2.Vue中阶/6.webpack打包工具/3.安装webpack/exercises.md
浏览文件 @ a601fafb
# 安装webpack
<div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
<br>
1.打开项目目录终端，输入命令:
```javascript
npm install webpack webpack-cli -D
```
2.然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
<br>
在 webpack.config.js 文件中编写代码进行webpack配置，如下：
```javascript
module.exports = {
mode:"development"//可以设置为development(开发模式)，production(发布模式)
}
```
补充：mode设置的是项目的编译模式。
<br>
如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些，如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些
<br>
3. 修改项目中的package.json文件添加运行脚本dev，如下：
```javascript
"scripts":{
"dev":"webpack"
}
```
注意：scripts节点下的脚本，可以通过 npm run 运行，如：
```javascript
运行终端命令：npm run dev
```
将会启动webpack进行项目打包
<br>
4. 运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件
打开项目目录终端，输入命令:
```javascript
npm run dev
```
等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件，默认会将dist/main.js 作为默认的打包输出js文件，如果不想使用默认的入口/出口js文件我们如何设置？<br/><br/>
在webpack 4.x中，默认会将 src/index.js 作为默认的打包入口js文件，默认会将dist/main.js 作为默认的打包输出js文件，如果不想使用默认的入口/出口js文件我们如何设置？<br/><br/>
## 答案
通过设置 webpack.config.js
```javascript
const path = require("path");
......
data/2.Vue中阶/6.webpack打包工具/4.webpack的基本使用/exercises.md
浏览文件 @ a601fafb
# webpack的基本使用
<div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
<br>
**项目目录并初始化**
<br>
创建项目，并打开项目所在目录的终端，输入命令：
> npm init -y
**创建首页及js文件**
<br>
在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li，在项目目录中创建js文件夹，并在文件夹中创建index.js文件
**以jQuery为例安装jQuery**
<br>
打开项目目录终端，输入命令:
>npm install jQuery -S
**导入jQuery**
<br>
打开index.js文件，编写代码导入jQuery并实现功能：
```javascript
import $ from "jquery";
$(function(){
$("li:odd").css("background","cyan");
$("li:odd").css("background","pink");
})
```
注意：此时项目运行会有错误，因为`import $ from "jquery"`;这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题，所以我们需要webpack来帮助我们解决这个问题。
**安装webpack**
<br>
1.打开项目目录终端，输入命令:
```javascript
npm install webpack webpack-cli -D
```
2.然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
<br>
在 webpack.config.js 文件中编写代码进行webpack配置，如下：
```javascript
module.exports = {
mode:"development"
}
```
补充：mode设置的是项目的编译模式。
<br>
3. 修改项目中的package.json文件添加运行脚本dev，如下：
```javascript
"scripts":{
"dev":"webpack"
}
```
注意：scripts节点下的脚本，可以通过 npm run 运行，如：
```javascript
运行终端命令：npm run dev
```
将会启动webpack进行项目打包
<br>
4. 运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件
打开项目目录终端，输入命令:
```javascript
npm run dev
```
等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。浏览页面查看效果。
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
关于webpack.config.js中的mode的参数描述正确的是?<br/><br/>
关于webpack的基本使用描述不正确的是?<br/><br/>
## 答案
参数可以设置为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
data/2.Vue中阶/6.webpack打包工具/5.webpack的相关配置/exercises.md
浏览文件 @ a601fafb
# 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/>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或