使用webpack构建

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

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

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

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

webpack的主要核心部分包括入口(Entry)出口(Output)加载器(Loaders)插件(Plugin)

单文件组件与vue-loader

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

使用.vue文件需要先安装vue-loadervue-style-loader等加载器并做配置。如果要使用ES6语法,还需要安装babelbabel-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对象就是定义时所在的对象,而不是使用时所在的对象。