webpack初學(xué)內(nèi)容詳細(xì)

初學(xué)webpack

學(xué)習(xí)web之前現(xiàn)要知道require引入的相關(guān)知識政勃,最好有一點(diǎn)node.js的相關(guān)基礎(chǔ)

然后你要先下載node,安裝git ?想要了解webpack的小伙伴應(yīng)該都有這個(gè)node千扔。安裝git的基礎(chǔ)

這里就不介紹。下面我們開始web初識:

1.在我們的demo的里面打開git


2.然后我們用那npm安裝webpack ??

? ? 2.1 ? ? ? ? ? ?npm install -g webpack ? ?//全局安裝 ? ? ? ? ? ?比較慢小伙伴們可以cnpm 淘寶鏡像功能(這里就不展示了)

? ? 2.2? ? ? ? ? ? npm install --save-dev webpack ? ? ?//安裝到項(xiàng)目里面 ??

為了讓愚蠢的學(xué)弟們看的懂畦粮,我就多截圖


項(xiàng)目結(jié)構(gòu)

3.創(chuàng)建一個(gè)page.json的配置文件

? ? ?3.1 ? npm ?init ? ?//這個(gè)創(chuàng)建

? ? ?3.2 ? 后面我們要給他一個(gè)名字 ? 然后一路回車

? ? 3.3? 我們的配置文件已經(jīng)創(chuàng)建好了要安裝webpack?

? ? ? ? ? ?npm install --save-dev webpack ? ?//安裝wenpck


page.json

安裝完我們會看到我們的配置page.json里面就配置好了webpack

? ? ? 3.4然后我們創(chuàng)建2個(gè)文件夾一個(gè)app文件夾放javascript,里面放min.js和greeter.js

? ? ? ? 一個(gè)public文件夾放我們的index.html


我們的項(xiàng)目結(jié)構(gòu)


greeter寫入這個(gè)我們基于node的一個(gè)框架CommonJS

>打個(gè)廣告node框架之前試了一下很好用‘koa’的新的框架想了解的小伙伴去百度

? ? ? 3.5我們在main.js里面引入greeter.js


main.js

? ? ? ? 3.6我們在index.html里面寫入


index.html

我們在git命令行輸入node_modules/.bin/webpack app/main.js public/exit.js


我們看到已經(jīng)對我們的這個(gè)js進(jìn)行了編譯并生成了exit.js的文件打開index,html

已經(jīng)出來了有沒有很開心绍填。開心就回復(fù)個(gè)233


已經(jīng)顯示出來了

我們看下編譯的exit的這個(gè)編譯好的js文件


exit.js

我們上面的都不用管,就看下面的這2個(gè) ?上面的這個(gè)是main.js ?下面的這個(gè)是我們的greeter.js

4.通過文件配置webpack我們來編譯

? 我們先創(chuàng)建一個(gè)webpack.config.js的webpack的配置文件


webpack.config.js

這樣我們就可以直接輸入webpack(非全局安裝需使用node_modules/.bin/webpack)

就可以直接進(jìn)行編譯(通過我們node.js下面的webpack插件進(jìn)行的)

5.通過我們的npm 來進(jìn)行編譯

我們在我們的page.json里面


page.js

新增加這個(gè)start的這個(gè) ?我們就可以直接npm start 就可以直接的進(jìn)行編譯

6.webpack自動刷新顯示修改后的結(jié)果功能

6.1 ? ? ? ?npm install --save-dev webpack-dev-server ? ?//安裝依賴

6.2 ? ? 在我們的webpack.config.js里面添加依賴


webpack.config.js


page.js

7.編譯配置(重要)(sass轉(zhuǎn)換css内贮。ES6轉(zhuǎn)換ES5产园。。夜郁。)Loaders

添加一個(gè)json的文件tsconfig.json ?在APP文件下



greeter文件修改

然后我們安裝編譯的依賴

然后我們npm run server ? (前面加有加過自動刷新的功能)

1.npm install --save-dev style-loader css-loader ?// 安裝我們的css

2.使用插件Plugins

刪除我們的public整個(gè)文件夾什燕,之后我們會直接打包出來css文件會直接打包到j(luò)s里面

在app文件下創(chuàng)建一個(gè)index.tmpl.html文件模版


新建一個(gè)名字為helloword的文件夾做為我們的入口文件夾

npm install --save-dev html-webpack-plugin ? //使用添加依賴




然后我們? 運(yùn)行 ?npm start ? ? 就會發(fā)現(xiàn)我們的helloword文件下面就已經(jīng)生成了我們的js和html

我們運(yùn)行npm run server 就可以看到我們執(zhí)行結(jié)果了

我們看下編譯后的js


基本上開發(fā)環(huán)境就可以了 ?

剩下的周日會更新css 壓縮 以及js壓縮 小伙伴們可以看下我們的出口文件里面 ?之后我們會把css也壓縮到exit.js ?里面

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市竞端,隨后出現(xiàn)的幾起案子屎即,更是在濱河造成了極大的恐慌,老刑警劉巖事富,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件技俐,死亡現(xiàn)場離奇詭異,居然都是意外死亡统台,警方通過查閱死者的電腦和手機(jī)雕擂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贱勃,“玉大人井赌,你說我怎么就攤上這事」笕牛” “怎么了仇穗?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長戚绕。 經(jīng)常有香客問我纹坐,道長,這世上最難降的妖魔是什么列肢? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任恰画,我火速辦了婚禮,結(jié)果婚禮上瓷马,老公的妹妹穿的比我還像新娘拴还。我一直安慰自己,他們只是感情好欧聘,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布片林。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪费封。 梳的紋絲不亂的頭發(fā)上焕妙,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天,我揣著相機(jī)與錄音弓摘,去河邊找鬼焚鹊。 笑死,一個(gè)胖子當(dāng)著我的面吹牛韧献,可吹牛的內(nèi)容都是我干的末患。 我是一名探鬼主播,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼锤窑,長吁一口氣:“原來是場噩夢啊……” “哼璧针!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起渊啰,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤探橱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后绘证,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隧膏,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年迈窟,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了私植。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,742評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡车酣,死狀恐怖曲稼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情湖员,我是刑警寧澤贫悄,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站娘摔,受9級特大地震影響窄坦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜凳寺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一鸭津、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肠缨,春花似錦逆趋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽名斟。三九已至,卻和暖如春魄眉,著一層夾襖步出監(jiān)牢的瞬間砰盐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工坑律, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留岩梳,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓脾歇,卻偏偏與公主長得像蒋腮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子藕各,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評論 2 361

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