谷粒学院
一、统一日志处理
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 [email protected]
#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
看看背景是不是变成粉色啦?