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 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打包工具(续)的更多相关文章
- Vue(基础七)_webpack打包工具用法(上)
一.前言 1.webpack原理 二.主要内容 1.webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,web ...
- Vue(基础七)_webpack使用工具(下)
一.前言 1.webpack.config文件配置 2.webpack打包css文件 ...
- Vue(基础七)_webpack(CommonsChunkPlug的使用)
---恢复内容开始--- 一.前言 1.多入口文件配置 2.CommonsChunkPlugin的用法 ...
- Vue(基础七)_webpack(webpack异步加载原理)
---恢复内容开始--- 一.前言 1.webpack异步加载原理’ 2.webpack.ensure原理 ...
- Java基础七(Eclipse工具)
今日内容介绍1.Eclipse开发工具2.超市库存管理系统 ###01Eclipse的下载安装 * A: Eclipse的下载安装 * a: 下载 * http://www.eclipse.org ...
- vue基础七
事件处理器 1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div id="example-1"> <butto ...
- vue 之webpack打包工具的使用
一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...
- Vue学习【第四篇】:Vue 之webpack打包工具的使用
什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...
- vue之webpack打包工具的使用
vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...
随机推荐
- html class选择器与id选择器
class选择器: <p class="p1"> .p1{ color:red; ..... } id选择器: <p id="p2"> ...
- css 引用自定义图标
1.进入阿里图标库搜索需要的图标(搜索“图标"是全部的) 2.选择需要的图标 下载 下载svg 格式 进入https://icomoon.io/ css引用库 解压下载的压缩包 ok ...
- Vue生产环境部署
前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...
- spring和junit整合
- java基础之Number
1.Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrapper ...
- C#开发轻松入门--笔记
第一章 1-1 .NET简介 (02:11) 1-2 Visual Studio简介及安装 (03:23) 1-3 创建C#控制台程序 (04:14) 1-4 练习题 1-5 程序界面各部分介绍 (0 ...
- 自定义Wed框架
Wed框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义wed框架 impor ...
- The Cow Lexicon POJ - 3267 dp
题意 给出一个母串 和一个字典 问母串最少删去几个字母 删去后的母串是由字典里面的单词拼起来的 思路:dp[i]表示从i到母串结尾最少需要删除多少个字母 初始化dp[length]=0 ...
- 数据分析---用pandas进行数据清洗(Data Analysis Pandas Data Munging/Wrangling)
这里利用ben的项目(https://github.com/ben519/DataWrangling/blob/master/Python/README.md),在此基础上增添了一些内容,来演示数据清 ...
- PSR-0 规范实例讲解 -- php 自动加载
PSR-0规范 [1]命名空间必须与绝对路径一致 [2]类名首字母必须大写 [3]除去入口文件外,其他“.php”必须只有一个类 [4]php类文件必须自动载入,不采用include等 [5]单一入口 ...