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

除了經過最多見的導出一個 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》全書在線閱讀連接

閱讀原文