class14_webpack

什么是webpack
webpack的安装
webpack的起步
webpack的配置
loader的使用
webpack中配置Vue
真实开发中Vue的使用
- el 和 template 的区别
- Vue终极使用方案
Vue脚手架
- 脚手架2
- 脚手架3
箭头函数中this的使用

什么是webpack

之前我们说过，前端模块化的重要性
而且还提到一些前端模块化的方案：AMD、CMD、CommonJS、ES6
在ES6之前，我们想要进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，
并且在通过模块化开发完了项目后，还需要处理模块间的各种依赖关系，并且将其进行整合打包
webpack其中一个核心功能就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系
不仅仅是js文件，我们的CSS、图片、JSON文件等在webpack中都可以被当作模块来使用
之前的gulp，进行的是简单的合并压缩等，并没有用到模块化的概念，它更加强调的是前端流程的自动化
webpack更加强调模块化开发，而文件压缩合并，预处理等功能是他附带的功能

webpack的安装

安装node
npm install webpack -g全局安装webpack即可

webpack的起步

项目目录中src（source code 源码）目录是我们开发环境，我们可以随便用模块化来开发
等开发完成，执行webpack ./src/main.js
相当于把打包好的文件放在dist目录中，之后我们只需要把dist目录中的文件在服务器部署即可

webpack的配置

我们在使用webpack ./src/main.js ./dist/bundle.js这种命令时，很麻烦，我们需要把这个命令简化，就相当于告诉把要打包的和打包好的文件在配置文件中做一个配置（在webpack.config.js文件中写入entry和output），这样直接使用webpack命令就直接可以打包了
而且后来使用webpack的话不太方便，我们进而将其映射为npm run dev/npm run build这种命令，这时就需要在package.json文件中进行配置
还有个问题，我们在使用webpack命令进行打包时，它默认使用的是全局的webpack，但是由于有的项目，它的webpack版本有可能是之前的版本，这时就需要在本地安装另一个版本的webpack，而且使用npm run build这种命令它会默认优先找到本地的webpack进行打包，如果没找到，才回去全局中找，这就是我们为什么推荐使用npm run build的原因
本地安装webpacknpm install webpack --save-dev，而且webpack后面还可以跟上@3.6.0版本号
安装完成后，就有一个node_modules文件夹

loader的使用

loader是webpack中一个非常核心的概念
webpack用来做什么呢？
- 我们之前主要是用webpack来处理我们的js代码，并且webpack会帮助我们处理js之间的依赖关系
- 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css，图片，包括一些高级的将ES6转成ES5代码，将TypeScript代码转成ES5代码，将less、scss转成css代码，将.jsx、.vue文件转为js文件等等
- 那么要怎么办呢？给webpack扩展对应的loader就可以啦
loader的使用过程
- 步骤一：通过npm安装需要使用的loader
- 步骤二：在webpack.config.js中的module关键字下进行配置即可
大部分loader我们都可以在webpack官网中找到，并学习对应的用法
我们在src目录下，尽量将js文件放在一个文件夹下，将css文件放在一个文件夹下，将图片等资源放在另一个文件夹下，但是不要把入口文件main.js放进文件夹中，它放在最src根目录中就行

css打包
在官网找到对应的loader并安装：npm install --save-dev css-loader
然后再npm install --save-dev style-loader相当于要安装两个loader才能实现css打包功能
css-loader只负责将css文件进行加载，style-loader负责将样式添加到DOM中，webpack读取use是从右向左读取的，所以先加载的css-loader就写在右边，style-loader写在左边
在webpack.config.js文件中进行相关的配置，在main.js文件中引入想要打包的css文件，再重新打包即可
```
module: {
  rules: [
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }
  ]
}
```
less打包
还是首先创建一个less文件，放在css文件夹中
npm install --save-dev less-loader less安装

配置

module: {
  rules: [
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    },{
      test: /\.less$/,
      use: [{
        loader: "style-loader"
      },{
        loader: "css-loader"
      },{
        loader: "less-loader"
      }]
    }
  ]
}

图片打包

webpack中配置Vue

真实开发中Vue的使用

我们通常开发的都是spa程序，也就是单页面富应用，首页只写一个
，然后引入main.js文件即可
而要展示的内容我们是写在main.js文件中的template属性后面的

el 和 template 的区别
Vue应用正常运行之后，我们考虑另外一个问题
- 如果我们希望将 data 中的数据显示在页面上，就必须修改 index.html
- 如果我们后面自定义了组件，也必须修改 index.html 来使用组件
- 但是 html 模版在之后的开发中，我们并不希望手动的来频繁修改，是否可以做到呢？

定义 template 属性

在前面的 Vue 实例中，我们定义了 el 属性，用于和 index.html 中的#app 来进行绑定，让 Vue 实例之后可以管理它其中的内容
这里，Vue 会自动将 index.html 中 id 为 app 的 div 中的内容替换为这里的 template 中的内容

如果同时存在el和template的话，template会将el中的内容替换掉的

   new Vue({
       el: '#app',
       template: `
           <div>
               <h2>{{message}}</h2>
               <button @click="btnClick">按钮</button>
           </div>
       `,
       data: {
           message: 'hello world!'
       },
       methods: {
           btnClick () {
               console.log('你好')
           }
       }
   })

Vue终极使用方案

如上使用方式有一个问题：如果应用很大的话，template中的内容就会非常复杂，我们应该想办法进行一个抽取

这时，我们就可以来抽取出来一个组件

将template中的内容拿到App组件中去，由于data和methods中的数据是在template中使用的，所以他们两个也被封装进了App组件内部，这时，只需要在 Vue 实例中注册组件并使用组件即可

   const App = {
       template: `
           <div>
               <h2>{{message}}</h2>
               <button @click="btnClick">按钮</button>
           </div>
       `,
       data () {
           return {
               message: 'hello world!'
           }
       },
       methods: {
           btnClick () {
               console.log('你好')
           }
       }
   }
   new Vue({
       el: '#app',
       template: '<App />',
       components: {
           App
       }
   })

然后我们使用ES6的 export import 来将这个App对象组件单独放在一个文件中，然后在main.js中进行引用，这样就成功封装并使用了一个组件
这样就会发现main.js中的代码会变得很简洁，而且修改代码就在app.js文件中进行修改 ```javascript import App from ‘./app.js’ import App from ‘./app.vue’

new Vue({ el: ‘#app’, template: ‘‘, components: { App } })


- 还有个问题，app.js文件中的模版和js代码没有分离，我们将模版抽离出去，这时，创建一个叫做app.vue的文件
```html
<template>
    <div>
      <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>
<script>
    export default {
      name: 'App',
    data () {
        return {
          message: 'hello world!'
      }
    },
    methods: {
        btnClick () {
          console.log('你好')
      }
    }
  }
</script>
<style scoped>
  .title { font-size: 100px; color: #bfa; }
</style>

Vue脚手架

如果只是简单写几个Vue的Demo，并不需要Vue CLI
如果在开发大型项目，那么必须使用到Vue CLI
- 使用Vue.js开发大型应用时，我们需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等情况
- 如果每个项目都要手动完成这些工作，效率将会很低，所以我们需要脚手架来帮助我们完成这些事情
CLI是什么意思？
- CLI是commond-line Interface 翻译为命令行界面，俗称脚手架
- Vue CLI是一个官方发布的Vue.js的项目脚手架
- 使用Vue.js可以快速搭建Vue开发环境以及对应的webpack的配置
Vue CLI使用前提
- 安装Node.js
- 安装webpack
- 安装vue cli 并拉取低版本2.X的脚手架
  脚手架2
使用vue init webpack my-project来创建Vue2项目

tips：我们之前的js代码都是要在浏览器中运行的，离开浏览器就不能执行js代码，而且 js 的出现就是为了跑在浏览器上面，但是 node 的出现改变了这一点，它为js提供了一个浏览器之外的运行环境，有人就想，我能不能用js来开发服务器？为了解决这一点，作者就开发了node，node本身是使用c++开发的，核心的东西是V8引擎，而V8引擎是谷歌的产品，这个V8引擎厉害之处是：它直接跳过了js编译为字节码这一步，直接将js编译为了二进制代码，而V8引擎也是用c++写的。而node 的思想就是借用这个V8引擎来帮助我们解析js代码，用它来作为服务器底层的支撑，所以只要电脑上装了node，就可以使用node build.js来执行某个js文件，这时就能直接在终端执行这个js文件

脚手架3

vue-cli3与2还是有很大的不同
- 3是基于webpack4打造的，而2还是基于webpack3的
- 3的设计原则是“0配置”，移除了配置文件根目录下的build和config等目录
- 3提供了vue cli ui 命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并将index.html移到了public中
使用vue create my-project来创建一个新项目

箭头函数中this的使用

箭头函数使用最多的场景就是，当我们准备将一个函数作为参数传入另一个函数中的时候
```
setTimeout(() => {
~~~
},1000)
```
箭头函数中的this引用的其实是最近作用域中的this