webpack基本配置說明

npm 初始化目錄:輸入命令npm init

②安裝webpack --save-dev

③建立文件夾 src 放代碼源文件 dist目錄打包項目靜態(tài)資源 建立index.html

④在index.html中引入打包后的js文件烤镐,建立style文件 放css

⑤新建文件名為webpack.config.js的文件袁铐,該文件為webpack的默認(rèn)配置文件挂捅,運行時會自動查找

語法:module.exports = {// configuration};

例衰琐,基本配置:

module.exports={

entry:{

app:'./src/app.js'

},//入口文件

output:{

path:__dirname + '/build',

filename:'js/[name].js'

}//出口文件

}

========package.json文件==========

npm的屬性script

在屬性里面定義一個腳本的內(nèi)容

可以是真是的webpack命令躯喇,這里自定義一個webpack腳本

"scripts":{

"test":"echo\"Error: no test specified\"&& exit 1",

"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

},

其中--progress命令參數(shù)顯示進(jìn)度 在webpack處理css文件以及一些高級命令行參數(shù)已說明

運行npm run webpack即可運行

==========================

webpack配置文件的 入口參數(shù)

entry,可以寫成

entry:[ "./entry1","./entry2"]兩個不相依賴的入口文件

也可以寫成對象形式

entry:{

main:'./main',

a:'./a'

}

由于有兩個入口坊夫,output就不能做相對路徑要改成:

output:{

path:'./dist/js',

filename:'[name]-[chunkhash].js' ?//chunkhash為文件的md5值具有唯一性搬葬,只有在有修改時才會改變碌秸。

}

相關(guān)可以查看官方文檔:http://webpack.github.io/docs/configuration.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末绍移,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子讥电,更是在濱河造成了極大的恐慌蹂窖,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恩敌,死亡現(xiàn)場離奇詭異瞬测,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)纠炮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門月趟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人恢口,你說我怎么就攤上這事孝宗。” “怎么了耕肩?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵因妇,是天一觀的道長。 經(jīng)常有香客問我猿诸,道長婚被,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任两芳,我火速辦了婚禮摔寨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘怖辆。我一直安慰自己是复,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布竖螃。 她就那樣靜靜地躺著淑廊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪特咆。 梳的紋絲不亂的頭發(fā)上季惩,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天录粱,我揣著相機(jī)與錄音,去河邊找鬼画拾。 笑死啥繁,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的青抛。 我是一名探鬼主播旗闽,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蜜另!你這毒婦竟也來了适室?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤举瑰,失蹤者是張志新(化名)和其女友劉穎捣辆,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體此迅,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡汽畴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了邮屁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片整袁。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖佑吝,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情绳匀,我是刑警寧澤芋忿,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站疾棵,受9級特大地震影響戈钢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜是尔,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一殉了、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拟枚,春花似錦薪铜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至脚乡,卻和暖如春蜒滩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工俯艰, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留捡遍,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓竹握,卻偏偏與公主長得像稽莉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子涩搓,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載充边。 webpack介紹和使用 一庸推、webpack介紹 1、由來 ...
    it筱竹閱讀 11,121評論 0 21
  • GitChat技術(shù)雜談 前言 本文較長浇冰,為了節(jié)省你的閱讀時間贬媒,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,693評論 7 110
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺肘习,特此分享以備自己日后查看际乘,也希望更多的人看到...
    小小字符閱讀 8,164評論 7 35
  • 記得2004年的時候,互聯(lián)網(wǎng)開發(fā)就是做網(wǎng)頁漂佩,那時也沒有前端和后端的區(qū)分脖含,有時一個網(wǎng)站就是一些純靜態(tài)的html,通過...
    陽陽陽一堆陽閱讀 3,293評論 0 5
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,464評論 2 71