iT邦幫忙

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

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

<26 - 心法 6 - 再探設定檔> webpack 設定檔中的 externals

今天要來談談在 webpack.config.js 檔中的 externals 參數的基本用法,在我的專案資料夾中,我並沒有安裝 jQuery 這個函式庫。

然而有時我們會需要載入外部的js檔(以此例為 jQuery),但在我們的模組中會使用到 jQuery,當然我們可以安裝 jQuery,但藉由 externals 的使用,來告知 webpack ,我們在模組中會使用 jQuery,且會自行從外部載入。

先建立一個檔案 ./app/external.js

內容如下:

import $ from 'jquery';

$(function(){
  $("p.para").css("color", "blue");
});

從上面的內容,可以得知,是會需要用到 jQuery,但我們並沒有安裝喔。程式碼也僅是將文字變成藍色。

更新 webpack.config.js

module.exports = {
  entry: {
    …
    test_external: './app/external.js'
  }
}

新增以上的 test_external 那行(即新增一個 entry point),若這樣去執行 webpack 的話,會出現以下的錯誤訊息:

ERROR in ./app/external.js
Module not found: Error: Can't resolve 'jquery' in '/Users/carlos/Documents/Carlos/company/projects/webpack_proj/app'
 @ ./app/external.js 3:14-31

很清礎地說明了無法解析 jquery

這時只要在設定檔中再新增以下的 externals 區段即可:

module.exports = {
  entry: {
    …
  },
  …
  plugins: [
    …
  ],
  
  externals: {
    jquery: 'jQuery'
  }
}

其實也就是排除 jQuery,告訴 webpack 說我們會自行載入外部的 jQuery,這樣就可以執行 webpack 正常通過了。

建立 ./index5.html

自行載入 https://code.jquery.com/jquery-3.1.0.js,然後將其它該載入的檔案載入:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack demo</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <script src="./dist/1bc95dd7dad91c667477.manifest.js"></script>
    <script src="./dist/b9bf4686146ad520f985.test_external.js"></script>
  </head>
  <body>
    <p class="para">這是段落</p>
  </body>
</html>

這時執行 webpack-dev-server --open,就可以看到以下畫面了:
http://ithelp.ithome.com.tw/upload/images/20161226/20069901beTRs1ti5Y.png

<p class="para">這是段落</p> 內的文字的確變成藍色了,多學了一個 webpack 的設定用法。/images/emoticon/emoticon42.gif


明天再繼續努力,敬請期待。/images/emoticon/emoticon41.gif


上一篇
<25 - 溫故知新 02> 階段複習過去所瞭解的 webpack - 可下載目前的原始碼
下一篇
<27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30

尚未有邦友留言

立即登入留言