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

2017鐵人賽 carlos chang webpack

Carlos Chang

2016-12-26 01:29:35

4671 瀏覽

分享至

今天要來談談在 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，就可以看到以下畫面了：