Day 20 - 為什麼要用 Webpack - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 20

Modern Web

前端技能樹的十萬個為什麼系列第 20 篇

Day 20 - 為什麼要用 Webpack

14th鐵人賽 webpack module bundler why

ycchiuuuu

2022-10-05 23:57:22

1416 瀏覽

分享至

前言

前天介紹的 Babel，以及昨天介紹的 ES module，處理了一些關於程式碼編譯轉換，以及模組化的概念。

有了它們之後，還需要一個整合性的工具，將這些零散的東西整合起來，今天來討論 Webpack。

先想一下

Webpack 是在什麼樣的時代誕生的？
Webpack 怎麼解決問題？
Webpack 的優缺點是什麼？
Webpack 適合什麼情境？

Webpack 是在什麼樣的時代誕生的？

我們已經有像是 ES module、CommonJS、AMD 等模組化工具，可以將 js 程式碼切割成多個模組，再透過 import / export 之類的語法，將模組組合起來。

不過光有模組還不夠，畢竟除了自己寫的模組，也會需要引用一些從 npm 或 yarn 安裝的外部模組，外部安裝的模組會放在 node_modules 裡面，雖然可以把它們的路徑寫成這樣：

import XXX from './node_modules/xxx/index.js'

這樣其實是相對不方便的，閱讀性也比較差。

同時，還需要處理各種模組工具的差異，比如 ES module 是用 import / export，而 CommonJS 則是用 require / module.exports，需要一個工具能夠整合這些差異。

另外，以上都只討論到純 js 的需求，如果今天想要把 html、css 甚至圖片檔案讀進來 js 裡面使用，都還沒有比較好的方式可以支援。

Webpack 怎麼解決問題？

Webpack 是一個 module bundler，顧名思義就是「將模組打包起來」的工具。

「模組」我們已經知道是透過 ES module 或 CommonJS 產生的，那「打包」呢？Webpack 的「打包」其實包含了很多事情，主要可以透過兩種設定來完成：

Loaders

Loaders 主要負責的是「將資源轉換為可讀取的模組」，是一種檔案的前處理，比如 html、css、TypeScript 甚至圖片檔案，都有相對應的 loader 可以處理：

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      { test: /\.html$/, use: 'html-loader' },
    ],
  },
};

甚至針對有處理順序的檔案，也可以安排 bottom-up 的 chain 來處理，比如 sass -> css -> style：

將 sass 語法轉換為 css
將 css 樣式轉換為 JavaScript
將轉換後的 JavaScript 變成真正的 CSS 樣式，透過 <style> tag 插入 DOM tree

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

更多可以參考官網列出來的 loaders 清單，甚至不夠用還可以自己用 Node.js 寫。