webpack最基本的配置就是導出一個靜態(tài)的對象，但是由于我們業(yè)務(wù)比較復(fù)雜，往往需要動態(tài)配置webpack以構(gòu)建目標代碼。

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、安化網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為安化等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

幸運的是，webpack為我們提供了動態(tài)配置webpack文件的支持。

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

1、導出為一個對象（Object）

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

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

2、導出為一個函數(shù)（Function）

很明顯，導出為一個對象缺乏靈活性。若我們想要根據(jù)不同的開發(fā)環(huán)境構(gòu)建不一樣的代碼。此時，webpack配置也應(yīng)該隨著改變。

所以，webpack支持我們導出一個函數(shù)，這個導出函數(shù)的默認參數(shù)為env和argv。其中，env為環(huán)境對象，我們可以通過命令行對其進行配置（webpack可自動讀取該配置），argv為命令行輸入?yún)?shù)的map。

（1）--env 參數(shù)支持各種各樣的配置：

（2）argv為webpack命令行參數(shù)的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配置文件中使用到的命令行參數(shù)，例如argv["entry-filename"]，均需要在命令行傳入，一個不能遺漏，否則webpack會報錯：Config did not export an object

3、導出為一個Promise對象

除了導出為一個函數(shù)，webpack還支持我們異步獲取配置變量來配置相關(guān)文件。（真是很強大?。?/p>

為了體現(xiàn)異步獲取數(shù)據(jù)的過程，我們把webpack.config.js修改為以下內(nèi)容：

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)
 })
}

4、導出多個配置

修改webpack.config.js的內(nèi)容如下：

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時，以上多個配置都會被構(gòu)建出來。如果我們只想構(gòu)建其中一份代碼，那么只需要傳入--config-name參數(shù)即可：

webpack --config-name=index

webpack --config-name=main

如上所示，我們可以分別構(gòu)建出name為index、name為main的配置對象所配置的內(nèi)容。

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

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為我們提供了眾多靈活的配置解決方案。當我們遇到復(fù)雜項目的時候，只要明確心中需求，大多數(shù)都能夠找到對應(yīng)的解決方案。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站名稱：webpack4實現(xiàn)不同的導出類型
URL分享：http://aaarwkj.com/article10/jeepgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站設(shè)計公司、手機網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、網(wǎng)站維護、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)