專案結構概略

圖片擷取自 pixnet

一開始對 webpack 沒有概念的我，配置環境就像在蓮花池裡一樣，轉來轉去不知道會到哪，就像當年不知道在裡面迷路了多久（泣～），但個人覺得用 Vue-cli 有個好處是，它已經幫你配置好了，只要搞懂當前專案結構，就能大概了解 webpack 的運作方式。

如果有正確安裝的話，hello-vue 目前的結構應該如下，接下來的五個小節會以 hello-vue 為範例，概略幾個比較重要的檔案，有了基礎知識後開發會更快上手喔～

├── build/             # webpack 配置檔案
├── config/            # webpack 參數設定檔
├── dist/              # 打包後可上線的檔案
├── node_modules/      # 存放套件的資料夾
├── src/               # 開發階段原始碼
├── static/            # 存放靜態檔案
├── .babelrc           # babel 配置檔案
├── .editorconfig
├── .eslintignore
├── .eslintrc.js       # ESLint 配置檔案
├── .gitignore
├── .postcssec.js
├── index.html         # 首頁
├── package.json       # node 配置檔案
└── README.md