認識 Webpack

2019-07-19 PV:

Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成最佳化過的程式碼。

安裝並開一個新的 webpack

安裝套件在 webpack 裡

透過 sass 載入 bootstrap 4
vue-axios ，一個 ajax 工具

因為 sass 在 vue cli 沒有安裝完整的 loader 所以這裡要再安裝 node-sass 、sass-loader

安裝

建議將 node-sass 與 sass-loader 添加到開發環境中，因為這兩個套件只有在開發時需要使用到，

可使用以下指令：

sudo npm install node-sass sass-loader –save-dev

加上 -dev 能夠將套件限制在開發環境下才能使用，

boostrap 因為打包後也要使用因此可以不用加上 -dev ，

可使用以下指令安裝：

sudo npm install bootstrap –save

載入 bootstrap

這一段的路徑是連接到 node_modules 裡的 bootstrap

Vue 的 style 還有一個特色，可以用 scope 限制樣式運用範圍
例如下面的紅色就限制在元件的 h1 裡面

使用 vue-axios

一個 ajax 套件，安裝方式
sudo npm install –save axios vue-axios

載入並且啟動它

使用 randomuser 的 API 取用隨機個人資料，利用 Ajax 取得 data

webpack 腳本介紹及自定義環境變數

webpack 會有一個 main.js 的主要檔案，它會載入其他相依的內容。webpack 會監控 main.js 及它載入的相關檔案，一更動的時候就會進行編譯。這些編譯的內容就會輸出成 .jpg、.js 等檔案

webpack.base 是最主要的腳本檔案，另外兩個會 required 它，透過 webpack merge 合併這兩個腳本。

dev 腳本的 serve 提供開發中預覽畫面用，包含 hot reload 及一些 host 與 port 供給預覽使用

在 production 版本就沒有 dev serve 功能，比較重視輸出結果，下方有一個套件將檔案內容輸出，它使用的是 index.html 這個 templete
。inject 是要不要把編譯完的內容注入進去。下方還包含壓縮：是否移除多餘空白字元、移除多餘的 html 屬性以及引號

核心腳本是 webpack.base

監控 main.js 的檔案叫做 entry。它指向的是 src/main.js

這個檔案是整個 Vue Cli 的進入點它會 import 許多檔案並在此編譯。

並在 output 輸出，底下有對應一些路徑，像是 path:config

resolove 是省略附檔名用，像 extension 是 main.js import 的檔案可以省略的附檔名,alias 是路徑的縮寫，像是＠就是 src

但 main.js 是一個 js 檔，它沒辦法閱讀.png 等等的檔案，webpack 有一個叫 loader 的工具，會依據不同的類別不同的設定檔，決定該怎樣呈現在 js 裡面，最後再執行輸出（output）。這些 loader 都在 module 裡，有一些規則例如處理圖片的 loader ，如果圖片在 10 kb 以下就會轉成 base64，否則它會轉成圖檔並加上一些 hash 字串