Use Webpack + Vue-Loader in VS2017

Slide 1

Slide 1 text

USE WEBPACK + VUE-LOADER IN VS2017 Anny Chang

Slide 2

Slide 2 text

WHY WEBPACK? 節省整理和維護前端靜態檔案的時間 1

Slide 3

Slide 3 text

WEBPACK 拆分程式碼片段

Slide 4

Slide 4 text

WEBPACK 減少初始化載入時間

Slide 5

Slide 5 text

WEBPACK 靜態資源模組化

Slide 6

Slide 6 text

WEBPACK 整合第三方模組

Slide 7

Slide 7 text

WEBPACK 依照需求自訂修改

Slide 8

Slide 8 text

WEBPACK 支援 hot-reload

Slide 9

Slide 9 text

WEBPACK 優點整合第三方模組 npm plugins… angular, react, vue, es6, typescript, sass, postcss, 愛用什麼就裝什麼.全部幫你打包成瀏覽器看得懂依照需求自訂修改客製程式打包結果，資料夾結構想長怎樣就怎樣支援 hot-reload 開發階段改任何 js, css 瀏覽器自動刷新拆分程式碼片段能夠拆分相依性的關係結構變成程式碼片段，然後依據需求載入減少初始化載入時間可做到只輸出一隻 css 一隻 js 靜態資源模組化每一個靜態資源檔都能被模組化，images, files 使用 hash, 大小限制…

Slide 10

Slide 10 text

WEBPACK

Slide 11

Slide 11 text

WHY VUE-LOADER? 網頁元素模組化更易維護整理 2

Slide 12

Slide 12 text

VUE-LOADER 優點 VUE 組件化單一元素的 html, css, js 寫在同個 Vue 組件。閱讀性高、元素可拆分並重複利用。 ... ... ... 組件內支援其他加載在每個 Vue 組件內支持其他的 Webpack 加載器。可依喜愛加載語法。 ... .. <style lang="sass">... 資料綁定靈活雙向、單向綁定皆可，父與子元件不互相影響，單獨運作。處理資料超方便，大量資料也可自由搭配 Vuex。

Slide 13

Slide 13 text

Try out Demo Develop, Production

Slide 14

Slide 14 text

資料夾結構 https://github.com/Annilla/vue-cli-with-vs 3

Slide 15

Slide 15 text

資料夾結構

Slide 16

Slide 16 text

資料夾結構

Slide 17

Slide 17 text

資料夾結構

Slide 18

Slide 18 text

Webpack Configuration https://webpack.js.org/configuration/ 4

Slide 19

Slide 19 text

Webpack.config.js

Slide 20

Slide 20 text

Vue-loader https://vuejs.org/v2/guide/single-file-components.html#Introduction 5

Slide 21

Slide 21 text

Vue-loader

Slide 22

Slide 22 text

VS2017 環境設定 6

Slide 23

Slide 23 text

SETUP 1. 安裝 Node.js / 版本： 6 以上 ( 官網 ) 2. 安裝擴充 NPM Task Runner (要執行npm 指令用) 3. 設定 Web Package Management (讓 VS 吃外部的 node 版本) 4. 詳細參見： OneNotes > Anny > Webpack

Slide 24

Slide 24 text

DEVELOP 開發步驟 7

Slide 25

Slide 25 text

DEVELOP 1. VS 開啟專案 > 開啟工作執行器總管 2. 執行 NPM Task Runner > 點兩下執行 npm install 3. 執行 NPM Task Runner > 點兩下執行 Custom server 啟動 webpack-dev-server 4. 建置專案 > 啟動但不偵錯 > 修改 .vue 即可自動 reload 瀏覽器注意：沒有被 webpack 監控的檔案不會因為修改而觸發 reload

Slide 26

Slide 26 text

PRODUCTION 產品步驟 8

Slide 27

Slide 27 text

PRODUCTION 1. 執行 NPM Task Runner > 點兩下執行 Custom build 2. 修改 Web.config 3. 建置專案

Slide 28

Slide 28 text

“ Web.config 修改的差別在於 _Layout.cshtml 內的 css, js 有用到這裡的值來判斷引入的路徑。 1. Develop路徑: webpack-dev-server localhost:9000/... 2. Production路徑: /...

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Syntax-highlighting ⊡ VScode: Vetur ⊡ VS2017: Vue.js Pack

Slide 31

Slide 31 text

REFERENCE ⊡ OneNote: 小組筆記本 > Anny > Webpack ⊡ Webpack ⊡ Vue ⊡ 想要了解更多嗎？請密切關注 Team blog Webpack 3 tutorial 系列文章

Slide 32

Slide 32 text

THANKS! Any questions? By Anny Chang