production是客戶端看到的完整版, 因此在production模式下我們會想要網站運行的速度越快越好, 連帶的我們打包出的bundle也應該越小越好
development模式是工程師端的開發中產品, development時由於除錯需要, 我們會想看到更多額外訊息, 速度則不是重點
在這兩種開發情境下, 需要的webpack設定就會不同
Hello Webpack! 開發模式
Hello webpack! Plugins
plugin(插件)是替webpack擴充功能的函式庫。
loaders可以讓我們引入不同類型的檔案, plugin是讓我們完成功能性的擴充或優化, 舉例來說, 有支叫做uglify的plugin可以進一步壓縮和最小化打包好的js
Hello webpack! Loader
除了javascript之外, webpack也能幫我們管理scss, less, html…等等其他的程式碼, 這時要借助的工具就是loader。
Hello webpack! 基礎設定
Why do we need Webpack?
在沒有打包工具以前, 一個網頁程式中包含多個CSS, HTML, JS, 而JS中有些可能是外部套件，有些可能會高度耦合, 導致import的順序不可輕易更動。後來有了Grunt和gulp, js可以被整合成一支檔案, 就不用擔心引入的順序問題, 可是這些工具無法判別哪些是套件。
Webpack可以判別哪些是額外使用的套件, 並且幫助我們打包程式碼, 不管是javascript, typescript, css, sass…, Webpack都可以幫我們把繁雜且交錯的程式碼整合成一份, 就不用再去擔心引入的順序問題
