webpack配置文件和常用配置項(xiàng)介紹
1、安裝webpack
1.全局安裝webpack:npm install webpack -g 或者轉(zhuǎn)化了cnpm則將npm改為cnpm進(jìn)行安裝
2.進(jìn)行初始化建立package.json文件記錄插件,命令行:npm init
3.webpack安裝到項(xiàng)目并將寫(xiě)入package.json的devDependencies中,
命令行:npm install webpack --save-dev。
2、webpack配置文件介紹
1.webpack需要配置文件webpack.config.js,手動(dòng)的創(chuàng)建于項(xiàng)目根目錄中就ok。一個(gè)項(xiàng)目可以設(shè)置多個(gè)配置文件,每個(gè)都可以有不同的功能。
2.webpack的配置文件,格式如下:
module.exports = { //配置開(kāi)始。主體 }
3.常用配置項(xiàng)簡(jiǎn)單說(shuō)明
entry:打包的入口文件,它可以是一個(gè)字符串或者一個(gè)對(duì)象。
output:配置打包的輸出結(jié)果,為一個(gè)對(duì)象。
fileName:定義輸出文件名,為一個(gè)字符串。
path:定義輸出文件路徑,為一個(gè)字符串。
module:定義對(duì)模塊的處理邏輯,為一個(gè)對(duì)象。
loaders:定義一系列的加載器,為一個(gè)數(shù)組?!?/p>
[ { test:正則表達(dá)式,用于匹配到的文件 loader/loaders:字符串或者數(shù)組,處理匹配到的文件。 //loader:string:只需要用到一個(gè)模塊加載器 //loaders:array:要使用多個(gè)模塊加載器 include:字符串或者數(shù)組,指包含的文件夾 exclude:字符串或者數(shù)組,指排除的文件夾 } ]
resolve:影響對(duì)模塊的解析,為一個(gè)對(duì)象
extensions:自動(dòng)補(bǔ)全識(shí)別后綴,為一個(gè)數(shù)組
plugins:定義插件,為一個(gè)數(shù)組
4.entry的詳細(xì)說(shuō)明
1)當(dāng)entry是一個(gè)字符串時(shí),這個(gè)字符串表示需要打包的模塊的路徑,如果只有一個(gè)要打包的模塊,可以使用這種形式
2)當(dāng)entry是一個(gè)對(duì)象
a.是數(shù)組時(shí),如果需要將多個(gè)模塊打包成一個(gè)模塊,可以使用這個(gè)方式。如果這些模塊之間不存在依賴,數(shù)組中值的順序沒(méi)有要求,如果存在依賴,則要將依賴性最高的模塊放在最后面。
例如:entry:["./dome/one.js",".dome/two.js"]
b.是鍵值對(duì)形式的對(duì)象是,當(dāng)需要分別打包成多個(gè)模塊時(shí),可以使用這種方式,例:
entry:{ module1:"./dome/one.js", module2:["./dome/two.js","./dome/three.js"] }
注:當(dāng)entry是一個(gè)鍵值對(duì)形式的對(duì)象時(shí),包名就是鍵名,output的filename不能是一個(gè)固定的值,因?yàn)槊總€(gè)包的名字不能一樣
5.output詳細(xì)說(shuō)明
1)output是一個(gè)對(duì)象
2)output.filename:指定輸出文件名,一個(gè)字符串。當(dāng)輸出一個(gè)文件,output.filename為一個(gè)確定的字符串
如:
output:{ filename:"build.js" }
當(dāng)輸出多個(gè)文件,output.filename不能為一個(gè)確定的字符串。為了讓每個(gè)文件有一個(gè)唯一的名字,需要用到下面的變量
如:
output:{ path:'./build/', fialname:'[name]_bundle.js' }
(3)output.path:指定輸出文件的路徑,相對(duì)路徑,為一個(gè)字符串
6.module.loaders詳細(xì)說(shuō)明
1)module是一個(gè)對(duì)象,定義對(duì)模塊的處理邏輯
2)module.loaders是一個(gè)數(shù)組,定義一系列加載器,這個(gè)數(shù)組中的每一項(xiàng)都是一個(gè)對(duì)象
3)
module.loaders:[ { test:正則表達(dá)式,用于匹配到的文件 loader/loaders:字符串或者數(shù)組,處理匹配到的文件?! ? //loader:string:只需要用到一個(gè)模塊加載器 //loaders:array:要使用多個(gè)模塊加載器 include:字符串或者數(shù)組,指包含的文件夾 exclude:字符串或者數(shù)組,指排除的文件夾 } ]
(4)module除了可以配置loaders以外還能配置其他的值.更詳細(xì)請(qǐng)移步webpack官網(wǎng)
7.resolve.extensions詳細(xì)說(shuō)明
1)resolve.extensions并不是必須配置的,當(dāng)不配置時(shí),會(huì)使用默認(rèn)值["", ".webpack.js", ".web.js", ".js"],當(dāng)手動(dòng)為resolve.extensions設(shè)置值,它的默認(rèn)值會(huì)被覆蓋
2)如果你想要每個(gè)模塊都能夠按照它們自己擴(kuò)展名正確的被解析,要在數(shù)組中添加一個(gè)空字符串。
3)如果你想請(qǐng)求一個(gè)js文件但是在請(qǐng)求時(shí)不帶擴(kuò)展(如:require('somecode')),那么就需要將'.js'添加到數(shù)組中。其他文件一樣
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
NodeJs讀取JSON文件格式化時(shí)的注意事項(xiàng)
本文是作者在進(jìn)行NodeJs開(kāi)發(fā)時(shí)偶然發(fā)現(xiàn)的問(wèn)題,經(jīng)過(guò)一番努力,最終找到解決方案,分享給大家,有需要的小伙伴可以參考下2016-09-09node 安裝 windows-build-tools全過(guò)程
這篇文章主要介紹了node 安裝 windows-build-tools全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Node.js的路由、EJS模板引擎、GET和POST請(qǐng)求講解
這篇文章介紹了Node.js的路由、EJS模板引擎、GET和POST請(qǐng)求,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06Node.js在圖片模板上生成二維碼圖片并附帶底部文字說(shuō)明實(shí)現(xiàn)詳解
這篇文章主要介紹了Node.js在圖片模板上生成二維碼圖片并附帶底部文字說(shuō)明實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08如何設(shè)置process.env.NODE_ENV生產(chǎn)環(huán)境模式
process.env.NODE_ENV默認(rèn)只有兩種狀態(tài)即development和production,本文主要介紹了process.env.NODE_ENV設(shè)置生產(chǎn)環(huán)境模式,感興趣的可以了解一下2021-09-09教你如何用Node實(shí)現(xiàn)API的轉(zhuǎn)發(fā)(某音樂(lè))
這篇文章主要介紹了教你如何用Node實(shí)現(xiàn)API的轉(zhuǎn)發(fā)(某音樂(lè)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Nodejs學(xué)習(xí)筆記之Global Objects全局對(duì)象
本文是NodeJS學(xué)習(xí)筆記系列文章的第二篇,從這篇開(kāi)始我們就根據(jù)官方文檔來(lái)逐個(gè)學(xué)習(xí)下NodeJS的各個(gè)模塊,首先我們來(lái)學(xué)習(xí)下Global2015-01-01