谷粒学院

一、统一日志处理

1、日志

1）、配置日志级别

日志记录器（Logger）的行为是分等级的。如下表所示：

分为：OFF、FATAL、ERROR、WARN、INFO、DEBUG、ALL

默认情况下，spring boot从控制台打印出来的日志级别只有INFO及以上级别，可以配置日志级别

# 设置日志级别
logging.level.root=WARN

这种方式只能将日志打印在控制台上

2、Logback日志

spring boot内部使用Logback作为日志实现的框架。

Logback和log4j非常相似，如果你对log4j很熟悉，那对logback很快就会得心应手。

logback相对于log4j的一些优点：https://blog.csdn.net/caisini_vc/article/details/48551287

1）、配置logback日志

删除 application.properties 中的日志配置

# 设置日志级别
#logging.level.root=WARN
# mybatis日志
#mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

安装idea彩色日志插件：grep-console，默认就有不需要额外装

resources 中创建 logback-spring.xml，名字固定的，不建议改

<?xml version="1.0" encoding="UTF-8"?>
<configuration scan="true" scanPeriod="10 seconds">
    <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL，如果设
    置为WARN，则低于WARN的信息都不会输出 -->
    <!-- scan:当此属性设置为true时，配置文件如果发生改变，将会被重新加载，默认值
    为true -->
    <!-- scanPeriod:设置监测配置文件是否有修改的时间间隔，如果没有给出时间单位，默认
    单位是毫秒。当scan为true时，此属性生效。默认的时间间隔为1分钟。 -->
    <!-- debug:当此属性设置为true时，将打印出logback内部日志信息，实时查
    看logback运行状态。默认值为false。 -->
    <contextName>logback</contextName>
    <!-- name的值是变量的名称，value的值时变量定义的值。通过定义的值会被插入
    到logger上下文中。定义变量后，可以使“${}”来使用变量。 -->
    <!--日志输出在文件夹的哪个位置-->
    <property name="log.path" value="D:\JavaStudy\gulixueyuan\logback"/>

    <!-- 彩色日志 -->
    <!-- 配置格式变量：CONSOLE_LOG_PATTERN 彩色日志格式 -->
    <!-- magenta:洋红 -->
    <!-- boldMagenta:粗红-->
    <!-- cyan:青色 -->
    <!-- white:白色 -->
    <!-- magenta:洋红 -->
    <property name="CONSOLE_LOG_PATTERN"
              value="%yellow(%date{yyyy-MM-dd HH:mm:ss}) |%highlight(%-5level)
|%blue(%thread) |%blue(%file:%line) |%green(%logger) |%cyan(%msg%n)"/>
    <!--输出到控制台-->
    <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
        <!--此日志appender是为开发使用，只配置最底级别，控制台输出的日志级别是大于或
        等于此级别的日志信息-->
        <!-- 例如：如果此处配置了INFO级别，则后面其他位置即使配置了DEBUG级别的日
        志，也不会被输出 -->
        <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
            <level>INFO</level>
        </filter>
        <encoder>
            <Pattern>${CONSOLE_LOG_PATTERN}</Pattern>
            <!-- 设置字符集 -->
            <charset>UTF-8</charset>
        </encoder>
    </appender>
    <!--输出到文件-->
    <!-- 时间滚动输出 level为 INFO 日志 -->
    <appender name="INFO_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <!-- 正在记录的日志文件的路径及文件名 -->
        <file>${log.path}/log_info.log</file>
        <!--日志文件输出格式-->
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                %logger{50} - %msg%n
            </pattern>
            <charset>UTF-8</charset>
        </encoder>
        <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
        <rollingPolicy
                class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <!-- 每天日志归档路径以及格式 -->
            <fileNamePattern>${log.path}/info/log-info-%d{yyyy-MM-
                dd}.%i.log
            </fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>100MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <!--日志文件保留天数-->
            <maxHistory>15</maxHistory>
        </rollingPolicy>
        <!-- 此日志文件只记录info级别的 -->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>INFO</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <!-- 时间滚动输出 level为 WARN 日志 -->
    <appender name="WARN_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <!-- 正在记录的日志文件的路径及文件名 -->
        <file>${log.path}/log_warn.log</file>
        <!--日志文件输出格式-->
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                %logger{50} - %msg%n
            </pattern>
            <charset>UTF-8</charset> <!-- 此处设置字符集 -->
        </encoder>
        <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
        <rollingPolicy
                class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${log.path}/warn/log-warn-%d{yyyy-MM-
                dd}.%i.log
            </fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>100MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <!--日志文件保留天数-->
            <maxHistory>15</maxHistory>
        </rollingPolicy>
        <!-- 此日志文件只记录warn级别的 -->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>warn</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <!-- 时间滚动输出 level为 ERROR 日志 -->
    <appender name="ERROR_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <!-- 正在记录的日志文件的路径及文件名 -->
        <file>${log.path}/log_error.log</file>
        <!--日志文件输出格式-->
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                %logger{50} - %msg%n
            </pattern>
            <charset>UTF-8</charset> <!-- 此处设置字符集 -->
        </encoder>
        <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
        <rollingPolicy
                class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${log.path}/error/log-error-%d{yyyy-MM-
                dd}.%i.log
            </fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>100MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <!--日志文件保留天数-->
            <maxHistory>15</maxHistory>
        </rollingPolicy>
        <!-- 此日志文件只记录ERROR级别的 -->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>ERROR</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <!--
    <logger>用来设置某一个包或者具体的某一个类的日志打印级别、以及指
    定<appender>。
    <logger>仅有一个name属性，
    一个可选的level和一个可选的addtivity属性。
    name:用来指定受此logger约束的某一个包或者具体的某一个类。
    level:用来设置打印级别，大小写无关：TRACE, DEBUG, INFO, WARN, ERROR, ALL
    和 OFF，
    如果未设置此属性，那么当前logger将会继承上级的级别。
    -->
    <!--
    使用mybatis的时候，sql语句是debug下才会打印，而这里我们只配置了info，所以想
    要查看sql语句的话，有以下两种操作：
        第一种把<root level="INFO">改成<root level="DEBUG">这样就会打印sql，不过
            这样日志那边会出现很多其他消息
        第二种就是单独给mapper下目录配置DEBUG模式，代码如下，这样配置sql语句会打
            印，其他还是正常DEBUG级别：
-->

    <!--开发环境:打印控制台-->
    <springProfile name="dev">
        <!--可以输出项目中的debug日志，包括mybatis的sql日志-->
        <logger name="com.guli" level="INFO"/>
        <!--
        root节点是必选节点，用来指定最基础的日志输出级别，只有一个level属性
        level:用来设置打印级别，大小写无关：TRACE, DEBUG, INFO, WARN, ERROR,
        ALL 和 OFF，默认是DEBUG
        可以包含零个或多个appender元素。
        -->
        <root level="INFO">
            <appender-ref ref="CONSOLE"/>
            <appender-ref ref="INFO_FILE"/>
            <appender-ref ref="WARN_FILE"/>
            <appender-ref ref="ERROR_FILE"/>
        </root>
    </springProfile>
    <!--生产环境:输出到文件-->
    <springProfile name="pro">
        <root level="INFO">
            <appender-ref ref="CONSOLE"/>
            <appender-ref ref="DEBUG_FILE"/>
            <appender-ref ref="INFO_FILE"/>
            <appender-ref ref="ERROR_FILE"/>
            <appender-ref ref="WARN_FILE"/>
        </root>
    </springProfile>
</configuration>

---

2）、将错误日志输出到文件

GlobalExceptionHandler.java 中

类上添加注解

@Slf4j

异常输出语句

log.error(e.getMessage());

---

二、前端开发和前端开发工具

PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）

下载和安装VS Code

下载地址：

https://code.visualstudio.com/

中文界面配置：

• 首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code

• 右下角弹出是否重启vs，点击“yes”

• 有些机器重启后如果界面没有变化，则 点击 左边栏Manage -> CommandPaletet…【Ctrl+Shift+p】

• 在搜索框中输入“configure display language”，回车

• 打开locale.json文件，修改文件下的属性 “locale”:“zh-cn”

{
// 定义 VS Code 的显示语言。
// 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的语言列表。
"locale":"zh-cn" // 更改将在重新启动 VS Code 之后生效。
}

• 重启vs

---

插件安装

为方便后续开发，建议安装如下插件（红色矩形框标记的插件）

创建项目：

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。
然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

保存工作区：

打开文件夹后，选择“文件 -> 将工作区另存为…”，为工作区文件起一个名字，存储在刚才的文件夹下即可

新建文件夹和网页：

预览网页：

以文件路径方式打开网页预览
需要安装“open in browser”插件：
文件右键 -> Open In Default Browser

以服务器方式打开网页预览：

需要安装“Live Server”插件：
文件右键 -> Open with Live Server

设置字体大小：

左边栏Manage -> settings -> 搜索 “font” -> Font size

开启完整的Emmet语法支持：

设置中搜索 Emmet：启用如下选项，必要时重启vs

---

三、ES6入门

自学参考：http://es6.ruanyifeng.com/

1、ECMAScript 6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目
标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1）、ECMAScript 和 JavaScript 的关系：

前者是后者的规格，后者是前者的一种实现

2）、ES6 与 ECMAScript 2015 的关系：

---

2、基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等
通用语法。
本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。

let声明变量

创建 let.html

<script>
    //es6如何定义变量，定义变量特点
    // js定义变量： var a =10;
    // es6写法定义变量： 使用关键字 let；let a = 10;

    {//代码块
        var a = 10;
        let b = 20;
    }
    //在代码块，外面输出变量
    console.log(a);
    console.log(b);

</script>

---

<script>
    // var 可以声明多次
	// let 只能声明一次
    var m = 1;
    var m = 2;
    let n = 3;
    let n = 4;
    console.log(m);
    console.log(n);
</script>

---

const声明常量（只读变量）

<script>
    //const 声明之后不允许改变
    const PI = "3.1415926"
    PI = 3
</script>

<script>
    //const 一但声明必须初始化，否则会报错
    const achang;
</script>

---

解构赋值

创建 解构赋值.html

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取

<script>
//数组解构
    
    // 传统
    let a=1 ,b = 2, c= 3
    console.log(a,b,c)

    // ES6
    let [x,y,z]=[1,2,3]
    console.log(x,y,z)

</script

---

<script>
    
    let user = {name:'achang',age:18}
    //传统
    let name1 = user.name;
    let age1 = user.age;
    console.log(name1,age1);
    //ES6
    let {name,age} = user //注意：结构的变量必须是user中的属性
    console.log(name,age);

</script>

---

模板字符串

创建 模板字符串.html

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

以下操作，都是使用``反引号`完成

---

多行字符串：

<script>
    let str = `Hey,
    can you stop angry now?`
    console.log(str);
    //Hey,
    //can you stop angry now？
</script>

字符串插入变量和表达式：

<script>

    let name = 'achang'
    let age = 18
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    console.log(info);
    //My Name is achang,I am 19 years old next year.

</script>

字符串中调用函数：

<script>

    function f(){
        return 'have fun!'
    }
    let str = `the game start,${f()}`
    console.log(str);
    //the game start,have fun!

</script>

---

声明对象简写

<script>
    
    const age = 12
    const name ='achang'

    //传统
    const person1 =  {age: age,name: name}
    console.log(person1);

    //ES6
    const person2 = {age,name}
    console.log(person2);

</script>

---

定义方法简写

<script>

    //传统
    const person1 = {
        sayHi:function(){
            console.log("hi");
        }
    }
    person1.sayHi();//hi

    //ES6
    const person2 = {
        sayHi(){
            console.log("h1");
        }
    }
    person2.sayHi();//h1

</script>

---

对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

拷贝对象：

<script>

    //拷贝对象
    let person1 = {name:'achang',age:17}
    let someone = {...person1}
    console.log(someone); //{name:'achang',age:17}

</script>

合并对象：

<script>

    //合并对象
    let age = {age:15}
    let name = {name:'achang'}
    let person2 = {...age,...name}
    console.log(person2); //{age:15,name:'achang'}

</script>

---

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

// 传统
var f1 = function(a){
return a
}
console.log(f1(1))

// ES6
var f2 = a => a
console.log(f2(1))

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b

箭头函数多用于匿名函数的定义

---

四、Vue

参考阿昌的博客：

https://blog.csdn.net/qq_43284469/category_10812569.html

---

五、Axios

参考阿昌的博客：

https://blog.csdn.net/qq_43284469/article/details/113838460

---

六、ElementUI

参考阿昌的博客：

https://blog.csdn.net/qq_43284469/category_10822815.html

---

七、Nodejs

1、简介

2、安装

官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版

查看版本：

node -v

3、快速入门

1、创建文件夹nodejs

2、控制台程序

创建 01-控制台程序.js

console.log('Hello Node.js')

打开命令行终端

进入到程序所在的目录，输入

node 01-控制台程序.js

浏览器的内核包括两部分核心：

• DOM渲染引擎；

• js解析器（js引擎）

• js运行在浏览器中的内核中的js引擎内部

Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）

简单来说，node底层就是浏览器底层的那一套东西，所以可以脱离浏览器运行

---

3、服务器端应用开发（了解）

创建 02-server-app.js

const http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('http://127.0.0.1:8888/');

运行服务器程序

node 02-server-app.js

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
停止服务：ctrl + c

---

八、NPM包管理器

1、简介

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

---

NPM工具的安装位置：

Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

• 在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明Node.js已经集成了npm工具

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

2、使用npm管理项目

1）、创建文件夹npm

2）、项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

文件夹下会生成package.json。类似与java项目中的pom.xml

---

3）、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址：

# 经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org

# 查看npm配置信息
npm config list

---

4）、npm下载依赖：【npm install命令】的使用

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的
<dependencies>
npm install jquery

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目

#如果安装时想指定特定的版本
npm install jquery@2.1.x

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack

---

5、其它命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

---

九、Babel

1、简介

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

2、安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install --global babel-cli

#查看是否安装成功
babel --version

---

3、Babel的使用

1）、初始化项目

npm init -y

2）、创建文件

下面是一段ES6代码：

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

3）、配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

---

3）、安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

---

4）、转码

# 转码结果写入一个文件
mkdir dist1

#指定文件转码
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
【babel src/example.js -o dist1/compiled.js】

# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
【babel src -d dist2】

---

十、模块化

Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）

什么是模块化开发

传统非模块化开发有如下的缺点：

• 命名冲突
• 文件依赖

模块化规范：

• CommonJS模块化规范

• ES6模块化规范

---

【ES5】模块化规范

01.js代码：

通过 module.exports 来方法暴露

//创建js方法
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
    }
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

//设置哪些方法可以被调用
//方法暴露
module.exports = {
    sum,
    subtract
}

02.js代码：调用01.js代码

通过require 来引入

//引入模块，注意：当前路径必须写 ./
const m = require('./01')
console.log(m);

const result1 = m.sum(1,2);
const result2 = m.subtract(1,2);
console.log(result1,result2);

运行程序：

node 02.js

CommonJS使用 exports 和require 来导出、导入模块。

---

【ES6】模块化规范

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

第一种写法

导出模块：

export function getList() {
    console.log('获取数据列表')
}

export function save() {
    console.log('保存数据')
}

导入模块：

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"

getList()
save()

保证之前上面babel的环境在，并转换为es5的语法

babel es6model -d es6model_es5

---

第二种写法

导出模块：

export default{
    getList(){
        console.log("获取数据列表2");
    },
    save(){
        console.log("保存数据2");
    }
}

导入模块：

import user from "./userApi2"
user.getList();
user.save();

保证之前上面babel的环境在，并转换为es5的语法

babel es6model -d es6model_es5

---

十一、Webpack

1、什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。减少了页面的请求。

---

2、Webpack安装

全局安装：

npm install -g webpack webpack-cli

安装后查看版本号：

webpack -v

---

3、初始化项目

1）创建webpack文件夹

进入webpack目录，执行命令

npm init -y

2）创建src文件夹

3）src下创建common.js

exports.info = function (str) {
    document.write(str);//在浏览器中输出
}

4）src下创建utils.js

exports.add = function (a, b) {
    return a + b;
}

5）src下创建main.js

const common = require('./common');
const utils = require('./utils');

common.info('Hello world!'+ utils.add(100,200));

---

4、JS打包

webpack目录下创建配置文件webpack.config.js

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件，main.js文件中已经引入了另外两个js文件
    output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路
    径,
    filename: 'bundle.js' //输出文件
    }
}

命令行执行编译命令：

webpack # 有黄色警告
webpack --mode=development # 没有警告
# 执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
//...,
"dev": "webpack --mode=development"
}

运行npm命令执行打包：

npm run dev

---

查看上面打包后的文件效果：

创建一个.html文件，引用bundle.js

<script src="./dist/bundle.js"></script>

用浏览器打开查看结果

---

5、CSS打包

安装style-loader和 css-loader：

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以

理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript认识css

npm install --save-dev style-loader css-loader

修改webpack.config.js：

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

在src文件夹创建body.css：

body{
    background:pink;
}

修改main.js：

在第一行引入body.css

require('./body.css');

删除之前的dist/bundle.js文件

再执行上面的打包指令

webpack --mode=development 

浏览器中查看index.html

看看背景是不是变成粉色啦？