使用webpack构建

webpack的主要适用场景时单页面富应用（SPA）。SPA通过是由一个html文件和一堆按需加载的js文件组成。

export和import是用来导出和导入模块的。一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。

在module对象的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。

当webpack编译过程中遇到require()或import语句导入一个后缀名为.css的文件时，先将它通过css-loader转换，再通过style-loader转换，然后继续打包。use选项的值可以是数组或字符串，如果是数组，它的编译顺序就是从后往前。

webpack的主要核心部分包括入口（Entry）、出口（Output）、加载器（Loaders）、插件（Plugin）。

单文件组件与vue-loader

<style>标签使用scoped属性，表示当前的CSS只在这个组件有效，如果不加，namediv的样式会应用到整个项目。

使用.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置。如果要使用ES6语法，还需要安装babel和babel-loader等加载器。

See the Pen Vue-webpack.config.js by whjin (@whjin) on CodePen.

新建.babelrc文件，并写入babel的配置，webpack会依赖此配置文件来使用babel编译ES6代码。

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

每个.vue文件代表一个组件，组件之间可以相互依赖。

ES语法：

=>是箭头函数

render: h=>h(App)等同于
    render: function(h) {
        return h(App)
    }

也等同于：
    render: h=>{
        return h(App)
    }

箭头函数里的this指向与普通函数不一样，箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。