你所不知的Webpack-多種配置方法

浩麟發表於2017-12-20
Web

除了通過最常見的匯出一個 Object 來描述 Webpack 所需的配置外，還有其它更靈活的方式，以簡化不同場景的配置。 下面來一一介紹它們。

匯出一個 Function

在大多數時候你需要從同一份原始碼中構建出多份程式碼，例如一份用於開發時，一份用於釋出到線上。

如果採用匯出一個 Object 來描述 Webpack 所需的配置的方法，需要寫量個檔案。 一個用於開發環境，一個用於線上環境。再在啟動時通過 webpack --config webpack.config.js 指定使用哪個配置檔案。

採用匯出一個 Function 的方式，能通過 JavaScript 靈活的控制配置，做到只用寫一個配置檔案就能完成以上要求。

匯出一個 Function 的使用方式如下：

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = function (env = {}, argv) {
  const plugins = [];

  const isProduction = env['production'];

  // 在生成環境才壓縮
  if (isProduction) {
    plugins.push(
      // 壓縮輸出的 JS 程式碼
      new UglifyJsPlugin()
    )
  }

  return {
    plugins: plugins,
    // 在生成環境不輸出 Source Map
    devtool: isProduction ? undefined : 'source-map',
  };
}
複製程式碼

在執行 Webpack 時，會給這個函式傳入2個引數，分別是：

  1. env：當前執行時的 Webpack 專屬環境變數，env 是一個 Object。讀取時直接訪問 Object 的屬性，設定它需要在啟動 Webpack 時帶上引數。例如啟動命令是 webpack --env.production --env.bao=foo時，則 env 的值是 {"production":"true","bao":"foo"}。
  2. argv：代表在啟動 Webpack 時所有通過命令列傳入的引數，例如 --config、--env、--devtool，可以通過 webpack -h 列出所有 Webpack 支援的命令列引數。

就以上配置檔案而言，在開發時執行命令 webpack 構建出方便除錯的程式碼，在需要構建出釋出到線上的程式碼時執行 webpack --env.production 構建出壓縮的程式碼。

本例項 提供專案完整程式碼

匯出一個返回 Promise 的函式

在有些情況下你不能以同步的方式返回一個描述配置的 Object，Webpack 還支援匯出一個返回 Promise 的函式，使用如下：

module.exports = function(env = {}, argv) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        // ...
      })
    }, 5000)
  })
}
複製程式碼

匯出多份配置

除了只匯出一份配置外，Webpack 還支援匯出一個陣列，陣列中可以包含每份配置，並且每份配置都會執行一遍構建。

注意本特性從 Webpack 3.1.0 版本才開始支援。

使用如下：

module.exports = [
  // 採用 Object 描述的一份配置
  {
    // ...
  },
  // 採用函式描述的一份配置
  function() {
    return {
      // ...
    }
  },
  // 採用非同步函式描述的一份配置
  function() {
    return Promise();
  }
]
複製程式碼

以上配置會導致 Webpack 針對這三份配置執行三次不同的構建。

這特別適合於用 Webpack 構建一個要上傳到 Npm 倉庫的庫，因為庫中可能需要包含多種模組化格式的程式碼，例如 CommonJS、UMD。

你所不知的Webpack-多種配置方法

《深入淺出Webpack》全書線上閱讀連結

閱讀原文

相關文章