打包入口文件
之前已经提过，打包的入口文件是main.js，我们来看下这个main.js文件：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
开头是4个import，但是这4个import并不完全相同。
import Vue from 'vue'，这句是导入了vue的npm模块，它在哪里？在node_modules文件中。
import App from './App.vue'，这句是导入了App.vue文件，也就是一个vue组件。
import router from './router'，这句实际上是import router from './router/index.js'的简写。
import store from './store'与上一句类似。
Vue.config.productionTip = false是关闭一些控制台的消息。
接下来，new Vue()生成了一个vue实例，参数是一个对象，包含了router\store\render，其中router是路由器，store是vuex的内容，目前用不到它，可以将其注释掉，不会有任何影响，render是渲染函数，它负责渲染App为Dom节点。
这里稍微解释一下render: h => h(App)这句，估计很多人看到时会有点懵。我们先采取这样的写法：
// 幼年期：亚古兽
render: function render(createElement) {
return createElement(App)
}
render是一个函数，它的第一个参数也是一个函数，名为createElement，这个函数的作用是渲染节点。而createElement只是一个形参，它的名字可以随便写，那么简写成h：
// 成熟期： 暴龙兽
render: function render(h) {
return h(App)
}
然后再简写为es6的语法：
// 完全体：机械暴龙兽
render(h) {
return h(App)
}
再改成箭头函数的写法，得到最终形态：
// 究极体：战斗暴龙兽
render: h => h(App)
再顺便说一句，为毛使用h这个字母？h代表hyperscript，我将其蹩脚地翻译为"超脚本"，意思指可以产生html的脚本。
最后，$mount('#app')将这个生成的vue实例挂在了#app元素上，那么这个#app元素在哪里呢？有眼尖的同学已经发现了，App.vue的template标签中，有一个，不，不是这里。我们把id="app"改成id=app-root，这并不影响程序（当然，样式会有变化，因为scss中的#app找不到元素了）。实际上，这里的#app，指的是public文件中的index.html的#app。
打包模板文件
让我们把目光放到/public/index.html，它就是所谓的打包模板文件。我们看下这个文件的内容：
<%= htmlWebpackPlugin.options.title %>
然后我们访问http://localhost:8080/，打开浏览器的开发者工具，切换至network标签页，然后选择all，我们来看下网络请求：
可以看到，服务器返回了一个html文件，内容如下：
chap1
与public/index.html相比，在后面多出了这么两句：
<
网络请求中，你也可以看到app.js和chunk-vendors.js，它们就是webpack打包后的文件，我们编写的代码，都被打包进了app.js，而项目的第三方依赖（比如vue.js）都被打包进了chunk-vendor.js。
查看页面的html元素，我们会发现不见了：
 => import('../views/About.vue')
}
]
Home组件被直接打包进了app.js，而About组件则使用了懒加载。如果项目中有重型、且不常用的组件，可以使用赖加载技术来优化性能。
下一篇文章，我们来修改一下项目的结构，使之更像是一个正经工程。