dist/
dist/ 就是打包後的資料夾，結構如下：
├── dist/
│ ├── static/
│ │ ├── css/
│ │ │ ├── ...
│ │ ├── img/
│ │ │ ├── ...
│ │ ├── js/
│ │ │ ├── ...
│ └── index.html
index.html
開啟 index.html 會發現程式碼都已經壓縮過了，還原來看的話，看出與根目錄的 index.html 有什麼不同了嗎？分別加載了壓縮過的 css 及 js 檔案，而不難看出壓縮過的檔案都放置在 static/ 下。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>hello-vue</title>
<link href=/static/css/app.742b959f7b6a45229cc87c3e1d1b4e88.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.ab0e238f71526ed58153.js></script>
<script type=text/javascript src=/static/js/vendor.5973cf24864eecc78c48.js></script>
<script type=text/javascript src=/static/js/app.cbf521f9d53e5bd6d4d3.js></script>
</body>
</html>
static/
以範例 hello-vue 來看，目前有下列 4 個檔案
- app.css ：檔案裡的 css 都會打包成這個檔案。
- manifest.js：比較像索引文件，在運行時可藉由該檔案解析並加載相對應的組件。
- vendor.js：打包第三方 js 檔案，因第三方代碼更動次數較少，獨立打包可減少 app.js 加載時的負荷。
- app.js：webpack 入口文件，基本上就是打包所開發的程式碼，也就是 App.vue。