是 Ray 不是 Array

在早期我接觸前端第一個靜態網頁開發工具就是 Gulp，往往許多人會把 Gulp 與 Webpack 傻傻分不清楚，當然我自己也是，在我還沒撰寫 Webpack 文章之前我只覺得 Webpack 超級像 Gulp，但是寫過一次就發現完全是不同的東西，所以這邊就來介紹一下 Gulp 是什麼東西，而且我個人也滿喜歡 Gulp 開發的:D

這一篇文章應該要在前面的章節撰寫的，後來我發現我忘記 CSS 壓縮的套件要加入，所以這邊紀錄一下。

一般來講 Webpack 都會有兩種開發模式，一種是 prod 與 dev，這邊就來記錄一下該如何設置 prod 與 dev 吧!

撰寫這篇文章的原因是因為自己的友站有撰寫了關於測試單元 (Unit Test) 的部分，那我也因為好奇所以就依照文章來試著玩看看吧~

前言

這一篇的標題想必很多人絕對會感到很奇妙，什麼叫「學習不要預設目標及未來」？意思是我在學習的時候都不要考慮目標及未來嗎？這邊我就來講講為什麼我會這樣下標題。

不要預設目標及未來

很多在拚轉職＆轉換跑道的人都會給自己一個目標及未來，例如「我 X 個月後要成功轉 XXXXXX…」，不然就是「我 X 幾個月後要成為 XXX…然後賺 XXX…」。

這絕對是一個好事，代表你給自己一個希望、目標及期望，但是這時候你一定會問我說：「可是你不是說不要預設目標及未來？」

沒有錯，我會這樣說那是因為很多人在拚轉職＆轉換跑道往往都是非相關背景及非相關科系，過程中你勢必會撞牆撞到懷疑人生。

舉例來講有一位小姐她並不會煮菜，但是她夢想轉職當廚師。

此時你叫一個完全沒有煮過菜甚至切過菜的人，突然去學習煮菜，首先她必須了解調味料、菜、烹飪時間、火候大小等等，看是一個簡單的做菜其實滿滿的複雜流程，所以你可以常常看到一些成功爆紅的小吃、餐廳，老闆往往都付出了好幾年的研究、穩紮穩打的學習才得到今天的成就，但是你會很少聽到這些成功的人跟你講：「我在我預期目標 X 個月轉職成廚師！」。

這樣講我還是不懂

其實這一篇文章並不是要給予負面能量，而是希望每一位在學習的時候不要給予自己過度的壓力，當你給自己一個預設目標及未來，也就是「我 X 個月後要成功轉 XXXXXX…」 or 「我 X 幾個月後要成為 XXX…然後賺 XXX…」，其實你是有很高的機率讓自己正在喪失熱情與興趣，我在 該如何正確的學習前端技術或程式語言有提到學習一個新技能的時候必須保持的三大要素，也就是興趣、熱情、毅力，如果你給自己一個預設目標及未來，有可能會發生兩種狀況

1. 撞牆期太長，發現自己期望的表現很差
2. 學習理解的時間比別人差，時間又快到自己的制制定的目標日期

當出現這種狀況的時候，你就很容易磨掉自己的興趣與熱情，因為你正在感受到時間給予你的壓力。

那我應該怎麼做？

我並不會說預設目標是一件不好的事情，這絕對是一件好事情代表你有一個前進的目標，可是你不應該在自己的目標中加入這一個東西時間。

你給自己的目標的加入了時間之後，你會發現你過程中一旦遇到瓶頸你會很急著解開它，而此時你制定的時間也在不停的流逝，這樣會發生什麼事情?

你會變得越來越煩躁，而這煩躁將會成為你的絆腳石。

Why?當你開始本身已經遇到瓶頸又因為時間給予的壓力，你很容易變得忽略細節，甚至脾氣變得很易怒。

所以最好的做法應該是「我學完這個技術後我要拚轉職成功！」，That’s it。

這句話與原本的「我 X 個月後要成功轉職成功！」，是不是差很多呢？這樣子制定目標是比較好的，對於自己在學習上的心態調整也會比較安心，當遇到瓶頸的時候你也比較不會忽略細節:D

接下來將會講解該如何打包圖片，但是打包圖片這邊有許多的雷點，在自己的友站就有提到「SCSS 可能會編譯失敗」，但是由於自己是採用 PUG Template，做法又有點不太一樣，所以這邊就來記錄一下吧

前言

相信經過前面反反覆覆的測試一定會覺得有時候打包 webpack -p 超麻煩，必須要手動將 dist 資料夾刪除才能再產生新的，所以這邊就來記錄一下該如何加入刪除文件的插件

起手式

首先一樣我們必須安裝插件

1

npm install --save-dev clean-webpack-plugin 

設置 webpack.config.js

設置方式依照官方 npm 說明看起來是滿簡單的，所以我們就來試著調整看看吧

1

const CleanWebpackPlugin = require('clean-webpack-plugin');

然後在插件的地方加入這一段

1

new CleanWebpackPlugin(pathClean),

這邊補充一個雷點，有可能你在這時候執行 Web Server 會出現錯誤 TypeError: CleanWebpackPlugin is not a constructor，這個問題只需要你這樣修改就可以了

1

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

那這樣就可以每次執行 webpack 的時候刪除 dist 資料夾，確保環境最新哩~

結尾

那為什麼要做文件清除呢?首先讓我們試著調整一下 webpack.config.js

然後先生成第一次，我們會得到這樣的結果

接下來修改一下 JavaScript 內容再生成一次，我們會發現檔案就多了一個

所以建議一定要搭配文件清除唷~

下一章節來講講打包圖片吧!

接下來將要來記錄我常用來切版的 HTML Template 語言，也就是 PUG，這邊並不會教學該如何撰寫 PUG 而是記錄該如何安裝 PUG 及編譯而已。

這章節要來講一下模組化開發的部分，很多時候當我們 JavaScript 越寫越多的時候就會希望特地區塊的功能可以切出來，那為什麼會留到 EP 6 才做紀錄呢？因為模組化開發也會建議使用 Bebal，所以這邊就來記錄一下該如何撰寫吧

由於我們平常撰寫 JavaScript 的時候，都必須顧慮每一個瀏覽器的支援性問題，所以這邊要來記錄替 Webpack 加入 Bebal 這個編譯神器工具，它可以幫助我們將我們所撰寫的 JavaScript 編譯成所有瀏覽器可以支援的 JavaScript