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

一、前言

              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 vue-loader@2.5.15 vue-template-compiler@2.5.17 -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打包工具(续)的更多相关文章

  1. Vue(基础七)_webpack打包工具用法(上)

    一.前言 1.webpack原理 二.主要内容 1.webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,web ...

  2. Vue(基础七)_webpack使用工具(下)

    一.前言  1.webpack.config文件配置                                          2.webpack打包css文件                 ...

  3. Vue(基础七)_webpack(CommonsChunkPlug的使用)

    ---恢复内容开始--- 一.前言 1.多入口文件配置                               2.CommonsChunkPlugin的用法                   ...

  4. Vue(基础七)_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  5. Java基础七(Eclipse工具)

    今日内容介绍1.Eclipse开发工具2.超市库存管理系统 ###01Eclipse的下载安装 * A: Eclipse的下载安装  * a: 下载 * http://www.eclipse.org ...

  6. vue基础七

    事件处理器 1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div id="example-1"> <butto ...

  7. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

  8. Vue学习【第四篇】:Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  9. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

随机推荐

  1. python工具使用笔记

    1.pip pip是Python官方推荐的包管理工具,在doc界面直接使用pip或者pip3命令即可,例如安装gensim: C:\Users\kayan.sjc>pip3 install -- ...

  2. Windows上安装 TensorFlow及简单命令

    1.官网及帮助文档 官网: https://www.tensorflow.org/install/install_windows 中文帮助文档:https://efeiefei.gitbooks.io ...

  3. 转 在PowerDesigner的PDM图形窗口中显示数据列的中文注释

    Name是名称(字段描述),Code是字段名称,Comment是注释名称,ER图中显示的是Name.一般设计时,Name跟comment都设计成描述, 而设计时候常把comment写成中文,name保 ...

  4. layui tips

  5. YUV格式与RGB格式

    YUV420介绍: YUV420格式是指,每个像素都保留一个Y(亮度)分量,而在水平方向上,不是每行都取U和V分量,而是一行只取U分量,则其接着一行就只取V分量,以此重复(即4:2:0, 4:0:2, ...

  6. System.Diagnostics.Process启动Civil 3D及AutoCAD

    QQ群友提出问题, 如何启动Civil 3D或者AutoCAD, Kean的博客里有相关的文章 http://through-the-interface.typepad.com/through_the ...

  7. MySQL中表复制:create table like 与 create table as select

    CREATE TABLE A LIKE B 此种方式在将表B复制到A时候会将表B完整的字段结构和索引复制到表A中来. CREATE TABLE A AS SELECT x,x,x,xx FROM B ...

  8. Github提交本地代码

     第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令 git init 第二步:将项目的所有文件添加到仓库中 git add . 如果想添加某个特定的文件,只需把.换成特定的文件名即可 ...

  9. windoows ftp的自动上传bat

    @echo off set P=%cd% #获取脚本当前文件路径 del /f /s /q %P%\tmp.txt set Y=%DATE:~0,4% #获取年 set M=%DATE:~5,2% # ...

  10. 洛谷2754 [CTSC1999]家园

    题目链接:[CTSC1999]家园 这个题目我们不是很好在做网络流的时候判断是否有解,因此我们考虑分开来做 对于是否有解的判断,我们唯一需要解决的是飞船的周期停泊问题,对于这个问题,我们可以用并查集解 ...