webpack4(一)： 初識webpack
webpack4 教學
什麼是webpack？為什麼要用 webpack？
Webpack是「模組打包工具 (module bundler)」。將眾多模組打包成一包檔案，減少頁面的請求，並編譯我們需要預先處理的內容，變成瀏覽器看得懂的東西，方便我們部署到線上。
Webpack 把「任何資源」都視為一個個的模組，圖片是模組，所以你可以 import Image from ‘./assets/banner.png’；CSS 是模組，你可以 import styles from ‘style.css’，只要是任何資源都可以 import 進來使用。
為了要支援這樣的功能，webpack 定義了許多 loader（載入器），不同的資源有不同的 loader，要透過 loader 處理才能把資源載入。而這個 loader 也是它強大的地方。
例如可以用 scss loader 載入 scss 的檔案，在引入資源的時候就可以順便編譯成 CSS，所以你不用自己做這件事。JS 也是一樣，你可以寫最新最潮的語法，然後在載入時用 babel-loader 把 ES10 的語法轉成 ES5。
這種資源的引入以及轉換，才是 webpack 最強大的地方。
還記得你在寫 React 的時候，把 import 圖片跟 CSS 當作吃飯喝水一樣嗎？好像這樣是很稀鬆平常的事。
你能夠寫出這種語法而且被支援，都是因為底層有 webpack 在幫你處理，都是因為有 image loader 跟 css loader 特別處理你的 import。這不是瀏覽器原生就支援的東西，而是 webpack 的模組系統幫你做的事。
再者，掌握了資源的打包這一段之後，webpack 就可以藉由 loader 以及 plugin 做更多有趣的事，例如：
1. 在載入 JS 的時候順便做 uglify
2. 在載入 CSS 的時候順便做 minify
3. 把打包出來的檔名順便加上 hash
4. 根據不同頁面打包不同的檔案，就不用一次載入全部 JS
5. 支援動態引入 JS，有需要的時候才載入
部分文字引用自 webpack 新手教學之淺談模組化與 snowpack。我覺得這篇文章寫得非常清楚！我原本對webpack也是一知半解，看過數十篇教學文章，也看過官方文檔，但也都模模糊糊…上面引述我只截取了一小段，但是通篇講解都很清楚明瞭，所以也分享給大家。
我覺得看教學文是這樣的，一篇看不懂，就多看十篇，還看不懂，就看國內、對岸、國外的文章，累積下來就懂了。讀懂了之後再去看官方文件就會覺得官方文件寫的還滿清楚的。
其實，不止React，Vue cli、Angular cli也是一樣，底層都有 webpack處理打包。了解後才知道，之前雖然不知道但我已經在用了。
很多時候都覺得自己只知其一不知其二，知道的東西很多，卻不夠深入了解，尤其前端要學的東西很多，如果都只知道一點卻不太會用，就會讓人覺得只是個半吊子。
我寫這些文章不是為了教別人，只是為了測試自己到了懂了多少，只有懂了才能寫出點東西來。
