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