webpack 入門指南

webpack

第一步:創(chuàng)建webpack-demo目錄脆烟,并且切到這個(gè)目錄下面绵跷,隨后初始化生成package.json且安裝webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

第二步:詳細(xì)操作步驟
(1)安裝lodash

npm install --save lodash

(2)隨后創(chuàng)建 app 子目錄下創(chuàng)建一個(gè) index.js 文件牺弄。

//引入lodash
import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['hello', 'world'], ' ');
  return element;
}
document.body.appendChild(component());

(3)在app目錄下創(chuàng)建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 2 demo</title>
</head>
<body>
    <script type="text/javascript" src='dist/bundle.js'></script>
</body>
</html>

(4) 在app目錄下創(chuàng)建webpack.config.js

var path = require('path');

module.exports ={
    entry:'./app/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

(5) package.jsont中添加配置

"scripts": {
        "build":"webpack"
 },

第三步:運(yùn)行

npm run build

第四步:用瀏覽器打開index.html查看效果

效果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末岛马,一起剝皮案震驚了整個(gè)濱河市索烹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌臭埋,老刑警劉巖踪央,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異瓢阴,居然都是意外死亡畅蹂,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進(jìn)店門荣恐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來液斜,“玉大人,你說我怎么就攤上這事募胃∑煅洌” “怎么了畦浓?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵痹束,是天一觀的道長。 經(jīng)常有香客問我讶请,道長祷嘶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任夺溢,我火速辦了婚禮论巍,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘风响。我一直安慰自己嘉汰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布状勤。 她就那樣靜靜地躺著鞋怀,像睡著了一般。 火紅的嫁衣襯著肌膚如雪持搜。 梳的紋絲不亂的頭發(fā)上密似,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機(jī)與錄音葫盼,去河邊找鬼残腌。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的抛猫。 我是一名探鬼主播蟆盹,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼闺金!你這毒婦竟也來了日缨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤掖看,失蹤者是張志新(化名)和其女友劉穎匣距,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哎壳,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡毅待,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了归榕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尸红。...
    茶點(diǎn)故事閱讀 40,424評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖刹泄,靈堂內(nèi)的尸體忽然破棺而出外里,到底是詐尸還是另有隱情,我是刑警寧澤特石,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布盅蝗,位于F島的核電站,受9級特大地震影響姆蘸,放射性物質(zhì)發(fā)生泄漏墩莫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一逞敷、第九天 我趴在偏房一處隱蔽的房頂上張望狂秦。 院中可真熱鬧,春花似錦推捐、人聲如沸裂问。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽堪簿。三九已至,卻和暖如春焰络,著一層夾襖步出監(jiān)牢的瞬間戴甩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工闪彼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甜孤,地道東北人协饲。 一個(gè)月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像缴川,于是被迫代替她去往敵國和親茉稠。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評論 2 359

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