本文介绍了webpack编译vue项目生成的代码探索，分享给大家，具体如下：
前言
往 main.js 里写入最简单的 vue 项目结构如下
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
App.vue 如下
<template>
<div id="app">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" rel="external nofollow" target="_blank">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a>
</li>
<li>
<a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a>
</li>
<li>
<a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
编译生成后得到一个316kb的文件，而在316Kb中包含着什么，我很好奇想探索一番。
npm run build
> learning-in-vue@1.0.0 build /Users/everlose/workspace/github/learningInVue
> cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 18d868a423b48dc263e9
Version: webpack 3.9.1
Time: 3693ms
Asset Size Chunks Chunk Names
build.js 316 kB 0 [emitted] [big] main
build.js.map 399 kB 0 [emitted] main
代码分解
按顺序往下解读，本篇编译后的代码在这儿，如果只想看结论那么请拉到最后有一张结构梳理图。