Webpack

https://ithelp.ithome.com.tw/articles/10215128

前言

先說説 CDN 是什麼吧，以 JQuery 為例，如果我們想在網頁上使用它，就得在 HTML 中使用 Script 將 JQuery 的程式碼載入：

<html>
  <body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </body>
</html>

然後現今的前端常常這邊用一些輪播、那邊用一些燈箱，所以 CDN 就會長得到處都是：

<html>
  <body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- lightgallery.js v1.6.6 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
  </body>
</html>

CDN 只要一多，HTML 就會顯得很雜亂，有時候更會搞不清楚哪些到底會用到，哪些不會？

而 Webpack 是個打包工具，能夠將專案中會用到的所有 JS 檔案打包起來，

除了處理 JS 外，

之後會提到的 SCSS，都能夠藉由它搭配 Babel 做包裝產出，

今天讓我們先學習如何使用 Webpack。

前置準備

需要先安裝 node 環境，如果環境還沒準備好，可以參考這篇文章。
一顆擁有學習熱忱的心。

使用方法

建立 npm 專案

開啟命令提示字元，先用 cd 指令將路徑指定到專案的資料夾後輸入：

npm init -y

輸入完後跟目錄底下會出現一個 package.json，裡面會描述專案資訊：

安裝 Webpack

建立專案後，便可繼續安裝 Webpack 及他的 cli 工具：

npm install webpack webpack-cli --save-dev

建立 Webpack 設定檔

直接在專案的根目錄新增一個檔案，檔名叫 webpack.config.js，內容如下：

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

entry 是進入點，Webpack 會從 ./src/index.js 開始編譯，並尋訪所有需要用到的 JS 或 Module 甚至是 CSS。
output 是打包後的檔案產生位置，filename 為打包後的檔案名稱，path 指定路徑。

建立進入點 JS

上方的進入點指定為 src 路徑下的 index.js，因此先建立 src 資料夾及 index.js：

/* 當前專案架構 */
src
 |-index.js
package.json
webpack.config.js

開啟 index.js，並輸入一些 JavaScript：

const profile = {
  name: '神Ｑ超人',
  position: 'Front End Development',
};

console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${profile.position}`);

進行打包

打開 package.json，並在其中的 script 中加入新指令：

{
  /* 其他省略 */
  "scripts": {
    "build": "webpack -p"
  },
  /* 其他省略 */
}

接著在命令提示字元中輸入指令：

npm run build

Webpack 便會開始打包，如果打包工作順利結束，目錄下會多一個 dist 資料夾，內部便是打包後的 JS，使用 node 執行結果也正常：

Import module

上方有提過，Webpack 會從進入點開始尋找專案需要的 JS 或 Module ，並打包為一個整理過的 JS，因此我們便不需要再用 CDN 管理哪些套件，並疑惑他們是否真的有使用到，刪除了會不會出錯，

因為 Webpack 會去判斷專案中有沒有需要他們，打包後就不會出現多餘的幽靈 Module

下方舉個例子來驗證這回事。

在 src 下另外建立一個 position 資料夾與其目錄下的 index.js，作為一個 Module：

/* 當前專案架構 */
src
 |-position
  |-index.js
 |-index.js
package.json
webpack.config.js

position/index.js 的內容為：

const position = 'Front End Development';

export default position;

在 src/index.js 中將 positon 的部分都先移除：

const profile = {
  name: '神Ｑ超人',
};

console.log(`Hi! My name is ${profile.name}`);

進行打包後，可由結果觀察到，即使 position/index.js 在專案中，但 Webpack 卻略過，因為程式的執行並不需要他：

接下來修改一下 src/index.js：

import position from './position/index.js'

const profile = {
  name: '神Ｑ超人',
};

console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${position}`);

加入 position/index.js 後，Webpack 便能夠從 src/index.js 內找到他，並判斷他是需要的，而加入打包檔案：

透過 Webpack 的打包，會讓專案的 index.html 變得更簡潔，也許今後就再也不會長這樣：

<html>
  <body>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- lightgallery.js v1.6.6 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
    <!-- 等等可能一堆 -->
  </body>
</html>

而是集所有需要套件的 bundle.js：

<html>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

文章中的原始碼都會整理在 GitHub 上。

PreviousBootstrap Table NextIIS - 網際網路資訊服務

Last updated 3 years ago