Use Webpack + Vue-Loader in VS2017

簡報於 Kingston 2017 Team workshop

Transcript

1. USE WEBPACK + VUE-LOADER IN VS2017 Anny Chang
2. WHY WEBPACK? 節省整理和維護前端靜態檔案的時間 1
3. WEBPACK 拆分程式碼片段
4. WEBPACK 減少初始化載入時間
5. WEBPACK 靜態資源模組化
6. WEBPACK 整合第三方模組
7. WEBPACK 依照需求自訂修改
8. WEBPACK 支援 hot-reload
9. WEBPACK 優點 整合第三方模組 npm plugins… angular, react, vue, es6, typescript, sass, postcss, 愛用什麼就裝 什麼.全部幫你打包成瀏覽器 看得懂 依照需求自訂修改 客製程式打包結果，資料夾結 構想長怎樣就怎樣 支援 hot-reload 開發階段改任何 js, css 瀏覽 器自動刷新 拆分程式碼片段 能夠拆分相依性的關係結構 變成程式碼片段，然後依據需 求載入 減少初始化載入時間 可做到只輸出一隻 css 一隻 js 靜態資源模組化 每一個靜態資源檔都能被模 組化，images, files 使用 hash, 大小限制…
10. WEBPACK
11. WHY VUE-LOADER? 網頁元素模組化更易維護整理 2
12. VUE-LOADER 優點 VUE 組件化 單一元素的 html, css, js 寫 在同個 Vue 組件。閱讀性 高、元素可拆分並重複利用。 <template>...</template> <script>...</script> <style>...</style> 組件內支援其他加載 在每個 Vue 組件內支持其他 的 Webpack 加載器。可依 喜愛加載語法。 <template lang="pug">... <script lang="typescript">.. <style lang="sass">... 資料綁定靈活 雙向、單向綁定皆可，父與子 元件不互相影響，單獨運作。 處理資料超方便，大量資料 也可自由搭配 Vuex。
13. Try out Demo Develop, Production
14. 資料夾結構 https://github.com/Annilla/vue-cli-with-vs 3
15. 資料夾結構
16. 資料夾結構
17. 資料夾結構
18. Webpack Configuration https://webpack.js.org/configuration/ 4
19. Webpack.config.js
20. Vue-loader https://vuejs.org/v2/guide/single-file-components.html#Introduction 5
21. Vue-loader
22. VS2017 環境設定 6
23. SETUP 1. 安裝 Node.js / 版本： 6 以上 ( 官網 ) 2. 安裝擴充 NPM Task Runner (要執行npm 指令用) 3. 設定 Web Package Management (讓 VS 吃外部的 node 版本) 4. 詳細參見： OneNotes > Anny > Webpack
24. DEVELOP 開發步驟 7
25. DEVELOP 1. VS 開啟專案 > 開啟工作執行器總管 2. 執行 NPM Task Runner > 點兩下執行 npm install 3. 執行 NPM Task Runner > 點兩下執行 Custom server 啟動 webpack-dev-server 4. 建置專案 > 啟動但不偵錯 > 修改 .vue 即可自動 reload 瀏覽器 注意：沒有被 webpack 監控的檔案不會因為修改而觸發 reload
26. PRODUCTION 產品步驟 8
27. PRODUCTION 1. 執行 NPM Task Runner > 點兩下執行 Custom build 2. 修改 Web.config <add key="UseWebpackDevServer" value="false"/> 3. 建置專案
28. “ Web.config 修改的差別在於 _Layout.cshtml 內 的 css, js 有用到這裡的值來判斷引入的路徑。 1. Develop路徑: webpack-dev-server localhost:9000/... 2. Production路徑: /...
30. Syntax-highlighting ⊡ VScode: Vetur ⊡ VS2017: Vue.js Pack
31. REFERENCE ⊡ OneNote: 小組筆記本 > Anny > Webpack ⊡ Webpack ⊡ Vue ⊡ 想要了解更多嗎？ 請密切關注 Team blog Webpack 3 tutorial 系列文章
32. THANKS! Any questions? By Anny Chang