webpack-dev-server
下载模块
npm install webpack-dev-server --save-dev
常用配置参数
--open 自动打开浏览器
--hot 热更新 不在刷新的情况下替换css样式
--inline 自动刷新
--port 9999 指定端口
--process 显示编译进度
在package.json文件中配置
"main": "src/main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
"prod": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
babel-core:
javascript 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就可以了。以JS标准为例，babel提供了如下的一些preset：
es2015
es2016
es2017
env
es20xx的preset只转译该年份批准的标准，包括了latest和es20xx各年份。另外，还有stage-0到stage-4的标准成形之前的各个阶段。这些都是实验版的preset，建议不要使用。
babel-plugin-transform-runtime
Babel默认只转换新的JavaScript语法，而不转换新胡API。例如，lterator、Generator、Set、Maps、Proxy，Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转译。如果想转译这些新的对象和方法，必须使用babel-polyfill，为当前环境提供一个垫片。
安装模块
npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime -D
注意：有时因为模块版本互不兼容的问题运行项目报错，请注意cmd工具的提示去重新安装某个模块即可。它会提示版本太高或太低，并建议合适的版本。
在webpack-dev-config.js里配置
module:{
loaders:[
{
//处理es6 7 8
test:/\js$/,
loader:'babel-loader',
exclude:/node_modules/,
options:{
presets:['env'],//处理关键字
plugins:['transform-runtime']//处理函数
}
}
]}
单文件引入
下载模块(-D指的是开发环境依赖，一般下载的是辅助程序员开发的工具插件；-S指的是项目依赖，比如jQuery，vue等库依赖)
-D会在package.json的"devDependencies"内显示版本，而-S在"dependencies"内显示版本。
npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 -D
npm install vue -S
创建App.vue文件
<template>
<!--当前组件的结构-->
<div>
{{msg}}
</div>
</template>
<script>
//当前组件的业务逻辑
export default {
data(){
return{
msg:'Hello App.vue'
}
}
}
</script>
<style>
//当前组件的样式
body{
background-color: #67CF22;
}
</style>
创建入口文件main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:"#app",
//vue2.0新增
//Render函数是Vue2.x版本新增的一个函数，使用虚拟dom来渲染节点提升性能，因为它基于JavaScript计算。
//通过使用createElement(h)来创建dom节点。createElement是render的核心方法。
//其Vue编译的时候会把template解析成虚拟dom
render:c=>c(App)
/*components:{
App
},
template:'<App/>'*/
})
在webpack-dev-config.js里配置
loaders:[
{
test:/\.vue$/,
loader:'vue-loader'
}
]
网友评论