webpack-dev-server、es6处理、单文件引入

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 [email protected] [email protected] -D
npm install vue -S

创建App.vue文件

创建入口文件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:''*/
})

在webpack-dev-config.js里配置

 loaders:[
           {
                test:/\.vue$/,
                loader:'vue-loader'
           }
]