Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Use Webpack + Vue-Loader in VS2017
Search
Anny Chang
August 31, 2017
Programming
0
410
Use Webpack + Vue-Loader in VS2017
簡報於 Kingston 2017 Team workshop
Anny Chang
August 31, 2017
Tweet
Share
More Decks by Anny Chang
See All by Anny Chang
Facebook Instant Articles - 測試到發布
annilla
1
260
Other Decks in Programming
See All in Programming
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Team operations that are not burdened by SRE
kazatohiei
1
310
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
The Cult of Friendly URLs
andyhume
79
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Language of Interfaces
destraynor
158
25k
Transcript
USE WEBPACK + VUE-LOADER IN VS2017 Anny Chang
WHY WEBPACK? 節省整理和維護前端靜態檔案的時間 1
WEBPACK 拆分程式碼片段
WEBPACK 減少初始化載入時間
WEBPACK 靜態資源模組化
WEBPACK 整合第三方模組
WEBPACK 依照需求自訂修改
WEBPACK 支援 hot-reload
WEBPACK 優點 整合第三方模組 npm plugins… angular, react, vue, es6, typescript,
sass, postcss, 愛用什麼就裝 什麼.全部幫你打包成瀏覽器 看得懂 依照需求自訂修改 客製程式打包結果,資料夾結 構想長怎樣就怎樣 支援 hot-reload 開發階段改任何 js, css 瀏覽 器自動刷新 拆分程式碼片段 能夠拆分相依性的關係結構 變成程式碼片段,然後依據需 求載入 減少初始化載入時間 可做到只輸出一隻 css 一隻 js 靜態資源模組化 每一個靜態資源檔都能被模 組化,images, files 使用 hash, 大小限制…
WEBPACK
WHY VUE-LOADER? 網頁元素模組化更易維護整理 2
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。
Try out Demo Develop, Production
資料夾結構 https://github.com/Annilla/vue-cli-with-vs 3
資料夾結構
資料夾結構
資料夾結構
Webpack Configuration https://webpack.js.org/configuration/ 4
Webpack.config.js
Vue-loader https://vuejs.org/v2/guide/single-file-components.html#Introduction 5
Vue-loader
VS2017 環境設定 6
SETUP 1. 安裝 Node.js / 版本: 6 以上 ( 官網
) 2. 安裝擴充 NPM Task Runner (要執行npm 指令用) 3. 設定 Web Package Management (讓 VS 吃外部的 node 版本) 4. 詳細參見: OneNotes > Anny > Webpack
DEVELOP 開發步驟 7
DEVELOP 1. VS 開啟專案 > 開啟工作執行器總管 2. 執行 NPM Task
Runner > 點兩下執行 npm install 3. 執行 NPM Task Runner > 點兩下執行 Custom server 啟動 webpack-dev-server 4. 建置專案 > 啟動但不偵錯 > 修改 .vue 即可自動 reload 瀏覽器 注意:沒有被 webpack 監控的檔案不會因為修改而觸發 reload
PRODUCTION 產品步驟 8
PRODUCTION 1. 執行 NPM Task Runner > 點兩下執行 Custom build
2. 修改 Web.config <add key="UseWebpackDevServer" value="false"/> 3. 建置專案
“ Web.config 修改的差別在於 _Layout.cshtml 內 的 css, js 有用到這裡的值來判斷引入的路徑。 1.
Develop路徑: webpack-dev-server localhost:9000/... 2. Production路徑: /...
None
Syntax-highlighting ⊡ VScode: Vetur ⊡ VS2017: Vue.js Pack
REFERENCE ⊡ OneNote: 小組筆記本 > Anny > Webpack ⊡ Webpack
⊡ Vue ⊡ 想要了解更多嗎? 請密切關注 Team blog Webpack 3 tutorial 系列文章
THANKS! Any questions? By Anny Chang