打包入口文件
之前已经提过，打包的入口文件是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标签中，有一个<div id="app"></div>，不，不是这里。我们把id="app"改成id=app-root，这并不影响程序（当然，样式会有变化，因为scss中的#app找不到元素了）。实际上，这里的#app，指的是public文件中的index.html的#app。
打包模板文件
让我们把目光放到/public/index.html，它就是所谓的打包模板文件。我们看下这个文件的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
然后我们访问http://localhost:8080/，打开浏览器的开发者工具，切换至network标签页，然后选择all，我们来看下网络请求：
可以看到，服务器返回了一个html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>chap1</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but chap1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
与public/index.html相比，在<div id="app"></div>后面多出了这么两句：
<script type="text/javascript" src="/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/js/app.js"></script><
网络请求中，你也可以看到app.js和chunk-vendors.js，它们就是webpack打包后的文件，我们编写的代码，都被打包进了app.js，而项目的第三方依赖（比如vue.js）都被打包进了chunk-vendor.js。
查看页面的html元素，我们会发现<div id="app"></div>不见了：
![](https://user-gold-cdn.xitu.io/2020/2/10/1702
取而代之的是<div id="app-root"></div>，这个#app-root就是之前App.vue文件中所修改的。app.js将App组件挂载到#app时,用App组件替换掉了#app。
总结一下，webpack干了什么？它以main.js为入口，将项目打包成了app.js和chunk-vendors.js（依赖项）两个文件，然后以public/index.html为模板，把这两个脚本插入到了html的body中，生成了一个新的index.html文件，然后将这个新的index.html文件复制到了目标文件夹的根目录下（此时目标文件夹在内存中），我们访问http://localhost:8080/时，服务器返回了这个index.html文件，而index.html文件又引入app.js和chunk-vendor.js，由他们呈现出了页面。
另外，当我们访问http://localhost:8080/about，在网络请求中，还看到了一个about.js，它为什么没有被打包进app.js，被单独请求了？看下src/router/index.js：
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
Home组件被直接打包进了app.js，而About组件则使用了懒加载。如果项目中有重型、且不常用的组件，可以使用赖加载技术来优化性能。
下一篇文章，我们来修改一下项目的结构，使之更像是一个正经工程。
