webpack 學習筆記：使用 lodash

本篇從頭開始，介紹在 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>

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

依賴關係不清晰
依賴丟失，或者載入順序不對，也會導致程式碼執行時報錯。
如果依賴沒有使用，瀏覽器就白白浪費了載入依賴庫（即這裡的 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 協議》，轉載必須註明作者和本文連結

webpack 學習筆記：使用 lodash

傳統方式的弊端

使用 webpack 打包

新增配置檔案

npm script

相關文章