iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 11

[DAY11]Webpack自動化打包工具

前言

開頭還是不免俗的來聊聊前端這幾年的變化,在這個大前端時代,除了要會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? 能吃嗎?

上一篇
[DAY10]用NPM來加速前端開發
下一篇
[DAY12]無痛模組化Javascript,匯出引入so easy
系列文
不用前端框架 手把手打造基礎SPA網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言