圖片來源

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

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

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

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

webpack 是什麼？

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

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

• Webpack 零設定，入門教學
• Webpack - module、bundle 和安裝
• 使用 webpack 開始創建第一個專案
• 使用 webpack.config.js 來設定 webpack !
• webpack.config.js - 設定第二篇 path 和 minify
• webpack.config.js - 設定 module 來編譯不同類型的檔案
• 設定 webpack.config.js 來編譯 Sass !
• Babel - 走向 JavaScript 的嶄新未來

簡單範例

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

直接附上 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

趕工中