當我們已經學會用webpack做初步的編譯跟打包後，你會想說，難道每次我次改檔案就要在執行 npm run build 重新編譯（不知道的可以看這），這樣在開發上面不會很麻煩嗎？ 其實如果用webpack編譯 js 檔案的話，有個執行的命令叫watch，可以幫助我們監控我們的js，只要今天js檔案有變動就會直接自動幫我們執行編譯，我們可以來看看。 我們要在package.json 中加上 watch 指令，首先我們要新增一個npm script “watch”: “webpack --watch” https://gist.github.com/MikeCheng1208/b8a608bf733023746a4256b8f9439c0c#file-package-json 這樣接下來我們除了 build 以外也多了一個watch的指令，接下來就執行 > npm…
上一篇我們在介紹webpack是什麼東西（沒看過趕快去看XD），接下來我們來談談細節的配置，我們已經可以做基本的輸出了，上篇教學説我們會分兩個資料夾src跟dist，src是指我們的開發檔案，輸出到dist是編譯過後的檔案，但是要怎麼指定src跟dist輸出的路徑呢？首先你要了解webpack是建立在nodejs上面的工具，webpack只負責編譯，搬檔案就要靠nodejs的api來幫忙啦！nodejs 要搬移任何的檔案都要靠一個叫path的api來做（文件在此）所以我們來看，首先要在webpack.config.js 用 require 的方式來引入path的模組。var path = require(‘path’);然後在module.exports裡一開始加入 context這個屬性，裡面使用path.resolve 這個方法來指定一開始的路徑context: path.resolve(__dirname, ‘src’),__dirname在nodejs裡面代表的一個特殊的變數，只的是當前執行文件所在目錄的完整目錄位置，所以我們要設定path.resolve第一個參數__dirname，然後指定第二個參數，從src資料夾開始找檔案。好啦！開始創一個src資料夾跟把我們要編譯的js放到src資料夾裡面這是目前的webpack.config.js設定（此區塊有程式碼無法顯示，文末有連結可回到原文查看！）好啦！實際跑跑看，開終端機跑> npm run build記得你的package.json 的script ，如果不知道請參考上一篇文章 但是今天你想要輸出不是在dist資料夾內呢？有些時候我們跟後端配合專案會需要把檔案自動給放到其他資料夾內，而不是dist，那要怎麼做？這時候我們可以在 output 設定裡面重新指定路徑，像這樣（此區塊有程式碼無法顯示，文末有連結可回到原文查看！）在output裡面可以用一個path的屬性，在使用 path.resolvepath:…
曾幾何時Web前端界寫的不再是單純html、css、js，許多Preprocess(前處理)工具跟框架不斷的冒出來，不斷拉高前端門檻，導致出現了許多斷層，可能你聽過 es6、pug、sass、vue、reactjs (沒聽過的可以參考之前我寫的另外一篇文章 - 在開始寫Code之前？) ，這些東西可以說是現在前端界必須要了解的，可是問題來了!? 即使寫了這些Preprocess，但是瀏覽器還是無法識別，看不懂啊，所以也出現了許多前端自動化的工具出來，編譯這些Preprocess然後打包成瀏覽器看得懂的內容，例如我們等一下會仔細提到的webpack、或是不太會提到的gulp、Parcel等……或許你打開104或是其他找工作的平台都會寫說需要有webpack打包的使用經驗或是其他第三方的自動化工具使用經驗，但是到底什麼是webpack? 到底webpack可以幫我們做什麼事情？ 其實webpack幫我們做的事情很簡單，就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server 上傳上去。 專案結構一般我們的專案會有兩個很重要的資料夾src與dist，這兩個資料夾是什麼？src : 專門放我們Preprocess的檔案，包括es6、pug、sass、vue、jsx等檔案，這個資料夾不會丟上去server部署。dist : 經過webpack編譯打包後，產生出瀏覽器看得懂的html、css、js，要部署也是這個資料夾去部署。 會看到src的資料夾裡面有許多資料夾，這個是我自己的分類方式，每個人的都多少會不一樣，僅供參考啦～像這樣的開發方式就像是現代前端的開發方式，我們就可以專心的用去多好用的Preprocess，不用去管最後的編譯成果！前面說了這麼多觀念，接下來我們來說些比較入門偏技術的部分～ (more…)
基本上在商業應用中，我們會盡可能的避免停機操作，試想光 CloudFlare 因為 bad deploy 當機幾分鐘至一個小時就會引發一連串的災難，在商場上每分每秒都是錢，為了避免不必要的損失，軟體工程常常會面臨到所謂的 zero downtime 操作。 但像資料庫的結構設計不可能一開始就符合大型架構，所以這過程通常都是不停的升級遷移，才有了符合現在設計的樣貌，所以不可避免的停機還是會發生的，通常幾個原因 應用程式的 code 不能同時兼容 migration 前 / 後的資料庫 因為資料量大，在跑 migration 時造成的長時間鎖表…
這篇文章適合誰及需先具備哪些知識 這篇文章適合之前對於Laravel及PHP有基礎認識，並想了解Botman，利用Botman來製作messenger聊天機器人的使用者。 Laravel文件參考： Laravel安裝文件 Laravel Valet安裝文件 在開始之前，你必須達到以下幾點 PHP的版本至少達到7 確定Laravel的環境安裝完成 確定Laravel Valet安裝完成 創建一個Facebook的粉絲專頁 創建一個Facebook App並指向剛剛創建的粉專 (more…)
今天要做最後的功能，這個功能能放在前台的部分， 當你往下滑到很下面又不想要又滑回去的時候，你就需要這個(感覺很像在賣藥哈~)。 (more…)
這次真的是字體的介紹了，是不是覺得網頁的字體醜醜的或是不是想要的風格呢? 這次要介紹一個免費的字體網站，那就是Google Fonts， 他不只提供免費的字體還會跟你說你的匯入程式要怎麼寫，是不是很貼心阿~ (more…)
一開始看到的時候會不會以為是字體相關的功能阿~No No No， 這是icon的網站，可免費使用在網頁上， 當然如果想放自己畫的icon也可以， 他網站有提供當個圖示的程式碼要怎麼運用才會出現在你的網頁上， 我們今天就簡單的做一兩個圖示試試吧~ (more…)
SCSS可以讓寫CSS變得很優雅， 當你寫完之後她會幫你編譯成CSS， 他們之間的關係我就不多加說明了， 如果想更了解他們之間的差異可以參考從 CSS 到 SASS (SCSS) 超入門觀念引導， 而進行編譯之前需要做以下幾件事。 (more…)