iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 2

<02 - 立竿見影> 使用 webpack 快速模組化,初探 config

  • 分享至 

  • xImage
  •  

如果一個好的工具,若不能在短時間瞭解整個運作原理的話,那還不如捨棄它,對吧!
我們的生命遠遠比這些工具來得重要,寫程式的目的是要來人生更美好,所以今天的主題,就是要快速地讓看倌們,瞭解 webpack 主要的工作流程(workflow),以利未來更深入的學習。

Dependency 問題

該動手做啦/images/emoticon/emoticon31.gif,先來瞭解一個狀況,一般若未使用 webpack 時的 dependency 問題:

一、在專案資料夾下,建立 app/index.js

此檔有用到 lodash 的函式(_.map()):

function component(){
  var ele = document.createElement('div');

  // _.map 是 lodash 的函式
  ele.innerHTML = _.map(['Hello','webpack'], function(item){
    return item + ' ';
  });

  return ele;
}

document.body.appendChild(component());

二、在專案資料夾下,建立 index.html

因為 app/index.js 有用到 lodash,所以此檔就需要載入 lodash 函式庫

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack demo</title>
    <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
  </head>
  <body>
    <script src="app/index.js" type="text/javascript"></script>
  </body>
</html>

以上這種是最常見的寫法,載入第一個 script,然後再載入第二個script,但這會有幾個問題:

  • 如果載入的順序有誤的話,就會執行失敗。
  • 第一個 script 若未載入的話,那也會執行失敗,因為第二個 script 需要使用 lodash。
  • 若第二個 script 突然移除不使用的話,那第一個 script 的載入,就會變成多餘,因為不會用到。

有鑑於以上問題,我們可以透過 webpack 來幫我們解決。


模組化(Module Bundler)

安裝 Lodash,為什麼要安裝 Lodash 呢?其實也只是為了示範,因為往往在寫 js 的時候,會用到第三方的函式庫,例如 jQuery、Lodash…,所以這裡以 lodash 為例。

一樣要先移到專案資料夾底下去執行指令:

$ cd ~/path/to/webpack_proj
$ npm install --save lodash

一、修改 app/index.js

因為此檔需要使用 lodash,所以我們在第一行直接載入 lodash:

import _ from 'lodash';

// 以下程式不變
// ……

二、修改 index.html

此時只要載入 dist/bundle.js 檔即可,dist/bundle.js 就是下一步要使用 webpack 來建立的檔案。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack demo</title>
  </head>
  <body>
    <script src="dist/bundle.js" type="text/javascript"></script>
  </body>
</html>

三、使用 webpack 來 bundle app/index.js,產生 dist/bundle.js 檔:

執行以下指令,將 app/index.js 輸出成 dist/bundle.js 檔:

$ webpack app/index.js dist/bundle.js
Hash: 4c7c84c3aa8486304087
Version: webpack 2.1.0-beta.27
Time: 395ms
    Asset    Size  Chunks             Chunk Names
bundle.js  543 kB       0  [emitted]  main
   [3] ./app/index.js 263 bytes {0} [built]
    + 3 hidden modules

透過以上的示範,我們就可以說 使用 app/index.js 之前,需要使用 lodash 函式庫,有此相依性,故透過 webpack,將 app/index.jslodash 打包(bundle) 在一起,產生 dist/bundle.js 模組。

這就是 模組化/images/emoticon/emoticon58.gif

初探 webpack config

方才我們使用以下指令來輸出檔案:

$ webpack app/index.js dist/bundle.js

但其實我們可以透過設定檔的方式,來更彈性的運用,首先於專案資料夾下建立 webpack.config.js,內容如下:

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

此時我們就可以使用以下指令來達成同樣的效果了:

$ webpack --config webpack.config.js

然而,只要你的專案資料夾下,有 webpack.config.js 檔案,webpack 預設上是會直接使用的,所以也可以直接執行以下指令即可:

$ webpack

是不是很簡單,明天,我們就持續來瞭解觀念性的東西喔。/images/emoticon/emoticon41.gif


上一篇
<01 - 起手式> 安裝 webpack
下一篇
<03 - 啟動原始碼> 使用 webpack-dev-server 及 webpack watch mode 來啟動吧!!
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言