iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 23
0
Modern Web

用範例理解 Vue.js系列 第 23

用範例理解 Vue.js #23:webpack in Vuetify

Imgur

圖片來源

延續之前的主題 Vuetify 中用到的技術大方向有:

  • vue-router
  • vuex
  • vue-server-renderer
  • webpack
  • express

今天要分享的是 webpack,並且解釋在 Vuetify 的模板 WebpackSSR 是如何使用 webpack。

還沒看前幾篇可以先從 Day19: Vuetify 開始閱讀。

webpack 是什麼?

如果你對 webpack 已經有一定的了解,以下這段可以跳過,或是你可以輕鬆的閱讀,並把觀念再順過一遍。

直接推薦這次鐵人賽的 Alex Tzeng, 曾苔眠的系列文章,淺顯易懂:

簡單範例

有鑑於之前的文章都有實體範例,我是不能放過自己的,就讓我按照上面幾篇文章做幾個範例:

直接附上 github repository: myfirstWebpack

每個範例都有執行方式,這邊就不贅述範例內容了,clone 下來按照步驟執行看看吧!

  1. easyWebpack

  2. easyWebpackConfig

  3. style-loader and css-loader

  4. sass-loader

  5. babel-loader

webpack in Vuetify template WebpackSSR

趕工中


上一篇
用範例理解 Vue.js #22:vue-server-renderer in Vuetify
下一篇
用範例理解 Vue.js #24:express in Vuetify
系列文
用範例理解 Vue.js30

尚未有邦友留言

立即登入留言