webpack4實現(xiàn)不同的導出類型
webpack最基本的配置就是導出一個靜態(tài)的對象,但是由于我們業(yè)務比較復雜,往往需要動態(tài)配置webpack以構建目標代碼。
幸運的是,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)境構建不一樣的代碼。此時,webpack配置也應該隨著改變。
所以,webpack支持我們導出一個函數(shù),這個導出函數(shù)的默認參數(shù)為env和argv。其中,env為環(huán)境對象,我們可以通過命令行對其進行配置(webpack可自動讀取該配置),argv為命令行輸入?yún)?shù)的map。
(1)--env 參數(shù)支持各種各樣的配置:
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 為數(shù)組,第一個數(shù)組元素為對象,prod是其屬性,默認為true。第二個數(shù)組元素為String,賦值為min |
webpack --env.prod=foo --env.prod=bar | { prod: ["foo", "bar"] } | env為對象,prod是對象的屬性。prod是一個數(shù)組,第一個數(shù)組元素為"foo",第二個數(shù)組對象為"bar"。注意,即使這種情況下,prod值不會被覆蓋,而是轉化為數(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還支持我們異步獲取配置變量來配置相關文件。(真是很強大?。?/p>
為了體現(xiàn)異步獲取數(shù)據(jù)的過程,我們把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) }) }
4、導出多個配置
修改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參數(shù)即可:
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為我們提供了眾多靈活的配置解決方案。當我們遇到復雜項目的時候,只要明確心中需求,大多數(shù)都能夠找到對應的解決方案。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Fastest way to build an HTML string(拼裝html字符串的最快方法)
Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 20092011-08-08layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法
今天小編就為大家分享一篇layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09讓mayfish支持mysqli數(shù)據(jù)庫驅動的實現(xiàn)方法
mysql 是非持繼連接函數(shù)而 mysqli 是永遠連接函數(shù)。也就是說 mysql 每次鏈接都會打開一個連接的進程而 mysqli 多次運行 mysqli 將使用同一連接進程,從而減少了服務器的開銷。2010-05-05