Vue学习5-(webpack)

上一篇 Vue学习4-(组件与路由)
下一篇 Vue学习6-(webpack发布策略)

---

一、什么是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>

---

上一篇 Vue学习4-(组件与路由)
下一篇 Vue学习6-(webpack发布策略)