webpack
- 一、什么是webpack
- 二、webpack安装方式
- 三、webpack打包使用
- 四、使用html-webpack-plugin插件配置启动页面
- 五、实现自动打开浏览器、热更新和配置浏览器的默认端口号
- 六、使用webpack打包css、less、sass文件、处理css中的路径
- 七、第三方loader与webpack之间的调用关系
- 八、使用babel处理高级JS语法
- 1、安装两套babel相关的包:
- 2、打开webpack.config.js配置文件,添加babel的loader配置项:
- 3、在项目的根目录中,创建一个.babelrc的配置文件,将来,babel-loader在执行的时候,会读取并使用这个配置文件:
- 九、ES6新特性
一、什么是webpack
- webpack 是前端项目的构建工具,将来,我们开发的项目,如果想要提高维护性和可控制性的话,尽量选择 webpack 进行构建;
- webpack 非常适合与单页面应用程序结合使用;不太适合与多页面的普通网站结合使用;
- 项目中使用 webpack 有什么好处:
- 能够处理静态资源的 依赖关系;
- 能够优化项目代码,比如:压缩合并文件,把图片转为base64编码格式;
- 能够把高级的语法转为低级的语法;
- webpack 能够转换一些模板文件; .vue
- 根据官网的图片介绍webpack打包的过程
webpack官网
二、webpack安装方式
1、可以全局安装webpack, 运行
npm i webpack -g
全局安装一下webpack;
2、也可以在项目中安装 webpack, 运行
npm i webpack -D
安装到项目开发依赖即可;
三、webpack打包使用
1、直接运行全局的 webpack 指令进行打包构建:
webpack ./src/main.js ./dist/bundle.js
2、webpack.config.js配置文件简化打包时候的命令
(1)在项目中,新建一个配置文件叫做webpack.config.js
(2)在配置文件中,向外暴露一个配置对象,供webpack执行的时候来读取这个配置对象:
3、 webpack-dev-server实时打包构建
-
1、每次修改完 项目代码,都需要手动运行一下 webpack 命令进行打包构建;比较麻烦
-
2、可以在项目本地安装一个webpack-dev-server的工具来实现实时打包构建的效果;
-
3、注意: webpack-dev-server这个工具,需要在项目本地安装,同时,它依赖于项目本地的webpack:
npm i webpack webpack-dev-server -D
-
4、需要打开package.json这个配置文件,找到 scripts 节点,在其中,新增一个dev脚本命令:
-
5、只要在终端中,运行
npm run dev
命令,去执行 dev脚本,启动webpack-dev-server这个实时构建编译的服务器; -
6、注意:webpack-dev-server打包出来的 bundle.js 并没有存放到实际的物理磁盘,而是托管到了内存中!托管的路径是项目的根目录,所以,在引用的时候,script 标签的路径应该这样写:
四、使用html-webpack-plugin插件配置启动页面
-
1、这个插件的作用:
能够根据给定的页面路径,在内存中生成一个一模一样的页面;
能够在内存中生成的页面中,自动把 打包好的 bundle.js 文件,注入为一个 script 标签! -
2、如何配置插件:先运行
npm i html-webpack-plugin -D
安装到本地开发依赖
五、实现自动打开浏览器、热更新和配置浏览器的默认端口号
六、使用webpack打包css、less、sass文件、处理css中的路径
-
1.运行
npm i style-loader css-loader -D
来安装处理 .css 文件的 第三方loader加载器 -
2、运行
npm i less-loader less -D
安装相关的loader -
3、运行
npm i sass-loader node-sass -D
-
4、运行
npm i url-loader file-loader -D
-
在webpack.config.js 的配置对象中,添加一个 module 节点,并在 module 节点下,新增一个 rules 数组,表示非JS文件的匹配规则:
处理css中的路径: -
如果想要限制什么图片被转码,什么图片不被转码,这时候,可以为 url-loader 提供 limit配置参数;只有小于给定值的图片,才会被转码成base64;limit 的单位是Byte字节
-
url-loader还有第二个配置参数,叫做 name
[name] 表示原来的名字
[ext] 表示原后缀名
[hash:长度] 表示取Hash值的前几位(总长度是 32 位字符串)
七、第三方loader与webpack之间的调用关系
八、使用babel处理高级JS语法
1、安装两套babel相关的包:
运行
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
运行cnpm i babel-preset-env babel-preset-stage-0 -D
2、打开webpack.config.js配置文件,添加babel的loader配置项:
3、在项目的根目录中,创建一个.babelrc的配置文件,将来,babel-loader在执行的时候,会读取并使用这个配置文件:
九、ES6新特性
let const
箭头函数
Promise
解构赋值
默认形参
函数扩展 function test(…arg) var arr = [1,2,3] test(…arr)
模板字符串${name}
字符串的扩展 .startsWith .endsWith padStart padEnd includes
async await
ES6中的导入和导出 import 变量名 from ‘标识符’ export default {} export
定义对象的快捷方式 var a =10 { a, show(){} }
class 关键字
Fetch API(作用就是来发起Ajax请求的, 目的是为了替代传统的XHR对象) fetch(请求的url地址字符串)
.then(function(response){
return response.json() }).then(result=>{
console.log(result) })
1、导入与导出
2、class实现面向对象编程
function Person(name, age) {
// 这里的 name 和 age 叫做 实例属性【只能通过实例对象,点 出来的属性,叫做实例属性】
this.name = name
this.age = age
}
// 原型方法 实例方法
Person.prototype.showName = function () {
console.log('我是:' + this.name)
}
// 这里的 info 叫做 静态属性【直接使用 构造函数 点 出来的属性,叫做 静态属性】
Person.info = '这是function构造函数'
var p1 = new Person('zs', 22)
/* console.log(p1.age)
console.log(Person.info) */
/* p1.showName() */
// 使用 class 定义的 ,叫做类
class Per {
// constructor 是构造函数的意思
// 每当 new Per() 的时候,必然会优先调用 Per 上的 constructor
constructor(name, age) {
// console.log('ok')
this.name = name
this.age = age
}
// static 是关键字,专门用来创建静态属性的
static info = '这是使用class关键字定义的类'
// 静态方法:
static show() {
console.log('这是静态的show方法')
}
// 实例方法
showName() {
console.log('我是' + this.name)
}
}
var p2 = new Per('ls', 13)
// console.log(p2.name)// 实例属性【通过类的实例,点出来的属性】
// console.log(Per.info) // 静态属性【通过类直接点出来的属性】
// 调用静态方法
// Per.show()
// console.log(p2)
p2.showName()
3、使用class实现面向对象编程
/* // 创建一个Person类
class Person {
// 在 class 的 { } 作用域中,只能写 constructor 函数,静态方法、静态属性、实例方法
// 在 class 类中,必须有一个 constructor,如果你没有显示定义,则 系统会默认提供一个看不见的constructor
// 如果用户显示定义了一个 constructor, 则会把默认的那个看不见的 constructor 给 覆盖掉
constructor(name, age) {
this.name = name
this.age = age
}
}
//创建一个广东人的类
class GDRen {
constructor(name, age) {
this.name = name
this.age = age
}
} */
// ---------------------------------------------------------------------
// 创建一个Person类
class Person {
// 在 class 的 { } 作用域中,只能写 constructor 函数,静态方法、静态属性、实例方法
// 在 class 类中,必须有一个 constructor,如果你没有显示定义,则 系统会默认提供一个看不见的constructor
// 如果用户显示定义了一个 constructor, 则会把默认的那个看不见的 constructor 给 覆盖掉
constructor(name, age) {
console.log('ok')
this.name = name
this.age = age
}
// 实例方法
sayHello() {
console.log('我的名字是:' + this.name)
}
}
//创建一个广东人的类
class GDRen extends Person {
// 什么叫面向对象???
// 记住这一句就行了:面向对象,就是【封装】、极致的封装就是面向对象;什么是极致的封装呢:【封装、继承、多态】
// 面向对象,就是把 一些功能性的代码,封装到 具体的 类中,如果需要什么功能,就 new 什么样类,这样,即提高的代码的复用性,提高了开发的效率和协作开发的体验;
// 谈编程的发展历史 面向过程(函数式编程) -> 面向对象(以对象的形式来组织代码)
constructor(name, age, eathobby) {
// super 这个函数,引申为 父类的构造函数
// 注意: 如果 子类 通过 extends 关键字,实现了继承,那么,子类的构造函数中,必须先调用一下 super 这个父类的构造函数,才能使用 this
console.log('ook')
super(name, age)
console.log('esc')
this.eathobby = eathobby
}
}
// var p1 = new Person('高婆婆', 26)
// console.log(p1)
var gd1 = new GDRen('xjj', 18, '福建人')
console.log(gd1)
gd1.sayHello()
4、使用fetchAPI请求服务器的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* fetch('http://39.106.32.91:3000/api/getlunbo')
.then(response => { // 通过 fetch 请求的结果,如果成功了,则第一个 .then中拿不到最终的数据
// console.log(response)
// 调用 response.json() 得到一个新的 Promise 对象
return response.json()
})
.then(data => { // 第二个.then中得到的才是真实的 数据
console.log(data)
}) */
// 课下研究 fetch API 能不能结合 async 和 await 来获取数据
getInfo()
</script>
</body>
</html>