【webpack4】不一樣的導出類型

webpack最基本的配置就是導出一個靜態的對象，可是因爲咱們業務比較複雜，每每須要動態配置webpack以構建目標代碼。

幸運的是，webpack爲咱們提供了動態配置webpack文件的支持。

下面介紹一下webpack的多種配置類型。

一、導出爲一個對象（Object）

webpack最多見的配置類型爲導出一個對象，即

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

二、導出爲一個函數（Function）

很明顯，導出爲一個對象缺少靈活性。若咱們想要根據不一樣的開發環境構建不同的代碼。此時，webpack配置也應該隨着改變。

因此，webpack支持咱們導出一個函數，這個導出函數的默認參數爲env和argv。其中，env爲環境對象，咱們能夠經過命令行對其進行配置（webpack可自動讀取該配置），argv爲命令行輸入參數的map。

（1）--env 參數支持各類各樣的配置：

Invocation	Resulting environment	notes
webpack --env prod	"prod"	env爲String類型，賦值爲prod
webpack --env.prod	{ prod: true }	env爲對象，prod是對象的屬性， 默認爲true
webpack --env.prod=1	{ prod: 1 }	env爲對象，prod是對象的屬性，賦值爲1
webpack --env.prod=foo	{ prod: "foo" }	env爲對象，prod是對象的屬性，賦值爲foo
webpack --env.prod --env.min	[ prod: true, min: true ]	env爲對象，prod和min是對象的屬性，默認爲true。--env命令能夠屢次使用，不會被覆蓋
webpack --env.prod --env min	[{ prod: true }, "min"]	env 爲數組，第一個數組元素爲對象，prod是其屬性，默認爲true。第二個數組元素爲String，賦值爲min
webpack --env.prod=foo --env.prod=bar	{ prod: ["foo", "bar"] }	env爲對象，prod是對象的屬性。prod是一個數組，第一個數組元素爲"foo",第二個數組對象爲"bar"。注意，即便這種狀況下，prod值不會被覆蓋，而是轉化爲數組。

（2）argv爲webpack命令行參數的map。

例如，咱們在命令行鍵入webpack --entry-filename=index,則在webpack配置文件中，咱們能夠經過argv["entry-filename"]來獲取命令行配置的值。即：

argv["entry-filename"] === "index"

（3）舉個例子：

const path = require('path')

module.exports = function (env, argv) {
  return {
    entry: './src/' + argv['entry-filename'] + '.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    devtool: env.prod ? 'source-map' : 'eval'
  }
}

在命令行中，咱們須要自鍵入

webpack --env.prod --entry-filename=index

注意，凡是webpack配置文件中使用到的命令行參數，例如argv["entry-filename"]，均須要在命令行傳入，一個不能遺漏，不然webpack會報錯：Config did not export an object

三、導出爲一個Promise對象

除了導出爲一個函數，webpack還支持咱們異步獲取配置變量來配置相關文件。（真是很強大！）

爲了體現異步獲取數據的過程，咱們把webpack.config.js修改成如下內容：

const path = require('path')

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './src/index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        }
      })
    }, 1000)
  })
}

四、導出多個配置

修改webpack.config.js的內容以下：

const path = require('path')

module.exports = [
  {
    name: 'index',
    entry: './src/index.js',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist')
    },
    mode: 'production'
  },
  {
    name: 'main',
    entry: './src/main.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
]

當咱們運行webpack時，以上多個配置都會被構建出來。若是咱們只想構建其中一份代碼，那麼只須要傳入--config-name參數便可：

webpack --config-name=index

webpack --config-name=main

如上所示，咱們能夠分別構建出name爲index、name爲main的配置對象所配置的內容。

以上配置常見的場景有：npm包利用不一樣的模塊語法構建不一樣的輸出文件，供不一樣的項目進行使用：

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  name: 'amd',
  entry: './app.js',
  mode: 'production',
},{
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  name: 'commonjs',
  entry: './app.js',
  mode: 'production',
}]

總而言之，webpack爲咱們提供了衆多靈活的配置解決方案。當咱們遇到複雜項目的時候，只要明確心中需求，大多數都可以找到對應的解決方案。