Vue学习5-(webpack)

小灰灰 2023-03-12 09:17 18阅读 0赞

> [上一篇 Vue学习4-(组件与路由)][Vue_4-]  
> [下一篇 Vue学习6-(webpack发布策略)][Vue_6-_webpack]

--------------------

### webpack ###

*  一、什么是webpack
 *  二、webpack安装方式
 *  三、webpack打包使用
 *   *  1、直接运行全局的 webpack 指令进行打包构建：
     *  2、webpack.config.js配置文件简化打包时候的命令
     *  3、 webpack-dev-server实时打包构建
 *  四、使用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新特性
 *   *  1、导入与导出
     *  2、class实现面向对象编程
     *  3、使用class实现面向对象编程
     *  4、使用fetchAPI请求服务器的数据

# 一、什么是webpack #

>  *  webpack 是前端项目的构建工具，将来，我们开发的项目，如果想要提高维护性和可控制性的话，尽量选择 webpack 进行构建；
>  *  webpack 非常适合与单页面应用程序结合使用；不太适合与多页面的普通网站结合使用；
>  *  项目中使用 webpack 有什么好处：
>     
>      *  能够处理静态资源的 依赖关系；
>      *  能够优化项目代码，比如：压缩合并文件，把图片转为base64编码格式；
>      *  能够把高级的语法转为低级的语法；
>      *  webpack 能够转换一些模板文件； .vue
>  *  根据官网的图片介绍webpack打包的过程  
>     [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执行的时候来读取这个配置对象：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

## 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脚本命令：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]
 *  5、只要在终端中，运行 `npm run dev`命令，去执行 dev脚本，启动webpack-dev-server这个实时构建编译的服务器；
 *  6、注意：webpack-dev-server打包出来的 bundle.js 并没有存放到实际的物理磁盘，而是托管到了内存中！托管的路径是项目的根目录，所以，在引用的时候，script 标签的路径应该这样写：
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]
 *

# 四、使用html-webpack-plugin插件配置启动页面 #

*  1、这个插件的作用：  
    能够根据给定的页面路径，在内存中生成一个一模一样的页面；  
    能够在内存中生成的页面中，自动把 打包好的 bundle.js 文件，注入为一个 script 标签！
 *  2、如何配置插件：先运行 `npm i html-webpack-plugin -D` 安装到本地开发依赖  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]

# 五、实现自动打开浏览器、热更新和配置浏览器的默认端口号 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

# 六、使用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文件的匹配规则：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]  
    处理css中的路径：
 *  如果想要限制什么图片被转码，什么图片不被转码，这时候，可以为 url-loader 提供 limit配置参数；只有小于给定值的图片，才会被转码成base64；limit 的单位是Byte字节
 *  url-loader还有第二个配置参数，叫做 name
    
    \[name\] 表示原来的名字  
    \[ext\] 表示原后缀名  
    \[hash:长度\] 表示取Hash值的前几位（总长度是 32 位字符串）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]

# 七、第三方loader与webpack之间的调用关系 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]

# 八、使用babel处理高级JS语法 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]

## 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配置项： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]

## 3、在项目的根目录中，创建一个.babelrc的配置文件，将来，babel-loader在执行的时候，会读取并使用这个配置文件： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]

# 九、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、导入与导出 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]

## 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_4-]  
> [下一篇 Vue学习6-(webpack发布策略)][Vue_6-_webpack]

[Vue_4-]: https://blog.csdn.net/m0_45234510/article/details/106084478
[Vue_6-_webpack]: https://blog.csdn.net/m0_45234510/article/details/106149089
[webpack]: http://webpack.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20230312/e4f96e6d19314174829dc19284646720.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20230312/ec51af45e2b442bb85bdbd492e7c516b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20230312/3f1d2e855ec443b780f41255991979d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20230312/03d013acf6a645d2990d7cc888081d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20230312/65b16303ab844ac09363ced1b9ce5974.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20230312/68e16f32c2f448bfb5806a8b6c65e676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20230312/085e40c064424a39bc1c6fccd5e535c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20230312/42d4dbaeb8de40c09fff102a4fc46264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20230312/1e675a48eeac47d38197e851e1acd43e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20230312/6a0cc51ef2234cb1b75a199f8cd2cdf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20230312/e4a8f0818dc3413289a3dc5402bb1d80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20230312/52c2fa6338704b2b8849bd96f07fcea6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20230312/b4c8a66b6d1a41a89407cb38b1d7d643.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]: /images/20230312/c0d6e242fd6645a6b622d5a943d78a89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]: /images/20230312/97975963e14041abaa97802efee4f7b2.png