您好,登錄后才能下訂單哦!
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)目并將寫入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 = { //配置開始。主體 }
3.常用配置項(xiàng)簡單說明
entry:打包的入口文件,它可以是一個(gè)字符串或者一個(gè)對(duì)象。
output:配置打包的輸出結(jié)果,為一個(gè)對(duì)象。
fileName:定義輸出文件名,為一個(gè)字符串。
path:定義輸出文件路徑,為一個(gè)字符串。
module:定義對(duì)模塊的處理邏輯,為一個(gè)對(duì)象。
loaders:定義一系列的加載器,為一個(gè)數(shù)組。
[ { 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ì)說明
1)當(dāng)entry是一個(gè)字符串時(shí),這個(gè)字符串表示需要打包的模塊的路徑,如果只有一個(gè)要打包的模塊,可以使用這種形式
2)當(dāng)entry是一個(gè)對(duì)象
a.是數(shù)組時(shí),如果需要將多個(gè)模塊打包成一個(gè)模塊,可以使用這個(gè)方式。如果這些模塊之間不存在依賴,數(shù)組中值的順序沒有要求,如果存在依賴,則要將依賴性最高的模塊放在最后面。
例如: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ì)說明
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ì)說明
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ì)說明
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ù)組中。其他文件一樣
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。