[Node.js] 模組整合工具 Webpack

Picture originated from webpack

官網介紹 : webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset

webpack 為 JavaScript 的模組整合工具，他可以做到很多事情，像是

1. 整合ES Modules、CommonJS 和 AMD 的模組
2. 將 JSX、 Coffee Script、TypeScript 等等瀏覽器還未支援的語法轉換成 JavaScript，也可以將 image 轉換成 data URL
3. 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
4. 轉換與整合樣式表 (css, sass, less 等)
5. 高度模組化的各種插件滿足你所有需求

webpack 這麼好棒棒學會怎麼使用也就成為前端工程師必學的課題，這邊會就最新版的 webpack 4 (撰文時間: 2018/06/20)來介紹，我們今天會把 webpack.config.js 的配置分為五個部分來解說 :

• entry (入口)
• output (輸出)
• loader (轉換)
• plugins (外掛)
• 額外屬性

這裡我們可以舉個比較生活化的例子來舉例 :

你有一堆文章(source)要出版，你要告訴出版商(webpack)文章在哪(entry)，以及要賣到哪個地區(output)，出版商會把你文章內所有語言格式都翻譯成統一語言(loader)，你也可以告訴出版商你想要額外增加那些功能(plugins)，像是加裝書套或是燙金之類的。

下面我們就直接以程式碼來說明，我相信各位都跟我一樣喜歡直接看範例程式碼 + 註解會比 scroll bar 拉來拉去還清楚。

entry、output

loader

解釋一下 .babelrc ，一樣直接上程式碼加註解

plugins

這邊會稍微介紹一下 plugin 怎麼用，之後有機會再來介紹一些好用的plugin

額外屬性

有些額外屬性其實蠻重要的，像是 target 對於開發 electron 來說就很重要，alias 也是一個很方便的屬性，還有哪些就讓我們看看吧 :

需要完整 webpack.config.js 程式碼範例 + 註解的話可以到這裡拿，

如果有錯誤的話，再請留言讓我知道一下，謝謝收看~