前言

開頭還是不免俗的來聊聊前端這幾年的變化，在這個大前端時代，除了要會HTML/CSS/JS這些語言的基礎知識，前端工程師也要學會使用自動化工具，來幫助開發加速與流程標準化。有時候真懷念以前的日子，只要切切版套CSS，跟用Javascript/JQuery來做功能，大概就能一招半式打天下。但這些年前端的世界突然變得多樣化，前端框架、SASS/SCSS、Webpack、babel，以上這些技能在求職網站應徵條件也是很常出現的，這些年Javascript的蓬勃發展與使用者介面精緻程度大幅提昇，現在的前端真的回不去了。

所以Webpack是什麼?

言歸正傳，Webpack究竟是什麼?首先看看維基百科怎麼說：

Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成最佳化過的程式碼。

簡單的說，Webpack是一個自動化網頁打包工具，把用到的程式經過最佳化處裡，然後打包成我們要用的檔案。我們去Webpack的官網可以看到以下這張圖:

「bundle your scripts」，這是一個打包的概念。這樣有什麼好處?以前傳統開發，我們會用到許多大大小小的JS/CSS/圖片，通常是各自存放在歸屬目錄，需要的時候再引入，不同的頁面可以引入不同的檔案，相對的檔案一多，就很難做管理，比如我們想區分發布跟開發的資料夾，若沒有自動化工具幫忙我們處理，就得常常移動檔案。另外在前面我們提到SPA都是在同一頁，若是照傳統的方式，等於要把所有用到的檔案給一個個引入進來，光想起來頭就暈了。Webpack可以幫助我們開發所使用到的模組進行最佳化，並且打包成經過處理的JS檔案，確保我們在發布產品的程式擁有最佳的品質，另外還可以搭配轉譯套件，使用上可以說是很方便。

前置設定

這邊一開始先初始化專案，開新目錄進入後使用指令npm init -y，可以直接快速建立package.json。首先我們在主目錄下建立index.html還有index.js檔案，index.js用途是放入我們主要的Javascript檔(接下來會用到)。專案目錄結構如下：

接著就來安裝webpack：

npm install webpack webpack-cli --save-dev

安裝完畢後，我們在主目錄建立webpack.config.js進行初始化的設置。首先我們進入webpack.config.js這隻設定檔，並做以下設定：

const path = require("path");
 
module.exports = {
  entry: "./index.js",
  output: {
    filename: "index.bundle.js",
    path: path.resolve(__dirname, "./"),
  },
};

entry代表是專案的進入點，也就是剛剛放在src路徑下的index.js，output代表產出打包的檔案，filename檔名為index.bundle.js，輸出在主路徑下。

如何使用

我們先到package.json，在scripts裡加入build的指令，如此可以用webpack來執行打包程序：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

接著我們用NPM下載安裝JQuery，完畢後我們直接在index.js引入，並且加入一段JQuery程式碼：

import $ from 'jquery'
 
$('body').html('hello!')

我們試試看在終端機輸入剛剛加入的webpack指令:

npm run build

沒意外應該可以在終端機看到以下畫面：

這時發現在主目錄多了一個index.bundle.js檔案，代表剛剛打包程序成功了，我們再進去index.bundle.js看看：

可以看到JQuery已經bundle進來了，這表示以後可以不用多引入一個JQuery，webpack已引入到index.bundle.js了。接著我們看到最下面，這邊是我們剛剛自定義使用JQuery程式的片段：

用VS Code live-server查看index.html最終成果：

以上是Webpack基本介紹，後面在開始SPA的專案時，我們也會使用babel、scss-loader結合webpack來轉譯程式碼，今天到這裡結束，明天見!

參考資料：

1. Getting Started - Webpack
2. Webpack 前端打包工具 - 環境安裝與基本配置
3. Webpack教學 (一) ：什麼是Webpack? 能吃嗎？