Vue（基础七）_webpack打包工具（续）

---恢复内容开始---

一、前言

1、webpack-dev-server

2、es6的解析

3、单文件引入

二、主要内容

1、webpack-dev-server

　　（1）常用的配置参数

　　--open ：自动打开浏览器

　　--hot: 热更新，不在刷新的情况下替换Css样式

--inline: 自动刷新

--port 9999 指定端口

--process 显示编译进度

　　（2）下载

npm install webpack-dev-server@ --save-dev

　　（3）在package.json中配置

{
  "name": "webpack-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js"  //webpack.dev.config.js这里是你当前的config文件
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.9.0"
  }
}

2、es6的解析

　　（1）模块介绍：

　　babel-core：的作用是把js代码分析成ast(抽象语法树), 方便各个插件分析语法进行相应的处理。有些新的语法在低版本js中是不存在的，如箭头函数， rest参数，函数参数默认值，这种语言层面的不兼容只能通过将代码转为ast, 分析其语法后转为低版本js. abel转义器本身提供了babel转义的API 如babel.transform等，用于对代码进行转义，像webpack的babel.loader就是调用这些API来完成转义过程的。

　　babel-loader:在将es6的代码transform进行转义，就是通过babel-loader来完成

　　babel-preset-env: 如果要自行配置转义过程中需要的各类插件，那比较麻烦，babel帮助我们做了一些插件集合，为preset. 我们只需要使用对应的preset就可以。

babel-plugin-transform-runtime:

babel默认只转换新的js语法, 而不转换新的API , 要想使用这些新的对象和方法，必须用babel-plyfill

　（2）下载对应的模块

npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime -D

　（3）项目目录如图所示

　　（4）在main.js中写一写es6语法如下：

console.log(11111)
console.log('hello')

const app = '张三';
let a =14;
console.log(a);

var obj=()=>{
    
}

//new Promise();

　　（5）package.json中的配置如下：

{
  "name": "webpack-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.9.0"
  }
}

　　（6）webpack.dev.config.js

// webpack ./main.js  ./build.js
module.exports = {
    // 入口
    entry:{
        // 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
        "main":'./src/main.js'
    },
    output:{
        filename:'./src/build.js'
    },
    watch:true,

    module:{
        loaders:[{
            //处理es6, 7 8
            test:/\.js$/,
            loader: 'babel-loader', 
 //exclude:/node_module/排除这里面的es6语法
            exclude:/node_modules/,
            options:{
                presets: ['env'],//处理语法，关键字
                plugins:['transform-runtime'], //处理函数
            }
        }]
    }
}

　　（7）运行：npm run dev. 这里可能会出现错误，往往都是版本兼容性问题，（下低版的webpack就好了）

3、单文件引入

　　（1）项目结构如图所示

　　（2）下载包:注意这里的版本最好要一致

npm install [email protected] [email protected] -D

npm install vue -S

　　（3）新建的.vue文件里面包含三部分内容

<template>
    <!--当前组件结构-->
    <div>
      {{msg}}
    </div>
</template>


<script>
  //当前组件的业务逻辑
  export default {
    data() {
      return {
         msg:'hello App.vue'
      }
    }
  }
</script>

<style>
   /*css样式*/
   body{
      background-color: green;
   }
</style>

　　（4）如果不配置，只会将App.vue当做一个普通文件来处理，所以我们需要进行配置

　　在webpack.config.js文件中配置如下

// webpack ./main.js  ./build.js
module.exports = {
    // 入口
    entry:{
        // 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
        "main":'./src/main.js'
    },
    output:{
        filename:'./src/build.js'
    },
    watch:true,

    module:{
        loaders:[{
            //单文件引入
            test: /\.vue$/,
            loader: 'vue-loader'

        }]
    }
}

　　（5）main.js中用下面这种方式不能渲染，会报如下错误

build.js:3520 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    components:{
        App
    },

    template:'<App/>'
    //render:c=>c(App)
})

render函数是vue2.x版本新增的一个函数；

使用虚拟Dom来渲染节点提升性能，因为他是基于javascript计算的

通过使用createElement(h)来创建dom节点，createElement是render的核心方法

其vue编译的时候会把template里面的节点解析成虚拟dom

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    /*components:{
        App
    },

    template:'<App/>'*/
    render:c=>c(App)
})

三、总结

---恢复内容结束---

Vue（基础七）_webpack打包工具（续）

猜你喜欢