webpack 學習筆記：使用 lodash

zhangbao發表於2020-10-05
Web筆記
系列文章：
webpack 學習筆記：入門介紹 webpack 學習筆記：核心概念（上） webpack 學習筆記：核心概念（下） webpack 學習筆記：使用 babel（上） webpack 學習筆記：使用 babel（下） webpack 學習筆記：使用 lodash webpack 學習筆記：引入 CSS（上） webpack 學習筆記：引入 CSS（下）

本篇從頭開始，介紹在 webpack 中打包引入 lodash 的用法。

首先，建立專案：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

這裡沒有全域性安裝 webpack，而是安裝在本地。後續，透過 npx webapck/ npm scripts 的形式即能呼叫。

專案結構：

webpack-demo
  |- package.json
+  |- index.html
+  |- /src
+    |- index.js

傳統方式的弊端

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

上面這種是傳統的組織程式碼的方式，有幾個明顯的弊端：

  1. 依賴關係不清晰
  2. 依賴丟失，或者載入順序不對，也會導致程式碼執行時報錯。
  3. 如果依賴沒有使用，瀏覽器就白白浪費了載入依賴庫（即這裡的 lodash）所消耗的頻寬資源

這就是為什麼會需要像 webpack 這樣的打包工具出現的原因。

接下來，我們重新調整專案結構，使用 webpack 來打包專案功能。

使用 webpack 打包

首先調整下專案結構，

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

index.html 檔案被轉移到了 dist/ 目錄之下，dist 是 distribution（釋出） 的意思（src/ 則是 source（原始碼）的意思）。

然後安裝依賴 lodash。

npm install -save lodash

npm install 時，生產依賴（會打包到最終包中的）使用 –save 標記，開發依賴（不會打包到最終包裡的）使用 –save-dev 標記。

現在修改 src/index.js 檔案：

+ import _ from 'lodash';
+
  function component() {
    const element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

現在可以移除 dist/index.html 中的 lodash 依賴了。執行 npx webpack 指令，就能在 dist/ 下看到生成的 main.js 打包檔案了。

npx webapck

...
  Asset      Size  Chunks             Chunk Names
main.js  72.3 KiB       0  [emitted]  main
...

webapck 是配置驅動的，雖然在執行 npx webapck 的時候，沒有顯式指定配置檔案，webpack 會使用預設的一套配置來生成我們的打包結果。如你所見，預設入口檔案是 src/index.js，打包出的檔案在 dist/main.js。

接下來我們把配置檔案加上。

新增配置檔案

在專案根目錄下建立 webpack.config.js

webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

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

現在重新使用配置檔案打包下：

npx webpack --config webpack.config.js

...
  Asset      Size  Chunks             Chunk Names
main.js  72.3 KiB       0  [emitted]  main
...

一樣的結果。

其實這裡的 –config webpack.config.js 是多餘的，因為執行 webpack 指令時，預設就會查詢專案根目錄下的 webpack.config.js 檔案，沒有的話，再使用預設配置資訊。

npm script

當然，我們還可以在 package.json 中，以 npm scripts 的形式註冊 webpack 打包指令：

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
+      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

之後，直接執行 npm run build 指令也可以了。隨著後續指令數的增加，更方便管理。

細心的話，會看到教程裡的打包檔案體積很大（72.3 KiB），這是因為最終打包程式碼中包含了 lodash 庫的所有程式碼——這是完全不必要的。

我們可以透過只引入 join 方法的形式，避免這個弊端：

import join from 'lodash/join';

function component() {
  const element = document.createElement('div');
  element.innerHTML = join(['Hello', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());

再次打包，

npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  1.17 KiB       0  [emitted]  main
...

可以看到，最終的打包體積銳減到 1.17 KB 了。

參考連結：webpack.js.org/guides/getting-star...

（完）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章