Webpack 4

概述

Webpack是一個(gè)模塊打包器篓跛,它能根據(jù)模塊的依賴關(guān)系遞歸的構(gòu)建一個(gè)依賴關(guān)系圖,當(dāng)中包含了應(yīng)用程序需要的所有模塊坦刀,最后打包成一個(gè)或者多個(gè)bundle愧沟。簡(jiǎn)單來說,就是將你的javascript編譯成一個(gè)或多個(gè)文件鲤遥。

創(chuàng)建項(xiàng)目和安裝webpack

npm init -y
npm install -g webpack webpack-cli --save-dev

package.json

package.json文件存放了項(xiàng)目的基本信息(包括名稱沐寺、版本,開發(fā)者盖奈、入口)以及第三方依賴包混坞。無(wú)論任何時(shí)候,你安裝一個(gè)新的包钢坦,包名和版本會(huì)添加到package.json文件中拔第。package-lock.json包含了你項(xiàng)目的整個(gè)依賴樹,包含了間接的依賴信息场钉。package-lock.json還包括了每個(gè)模塊具體的版本信息。
還可以在package.json中配置打包命令懈涛,如下所示:

“build”:”webpack --mode=production”

配置

webpack.config.js是webpack默認(rèn)使用配置文件逛万,也是大多開發(fā)者使用的配置文件。但可以在package.json中定義自己的配置文件批钠。
Webpack4約定了默認(rèn)的配置宇植,可以實(shí)現(xiàn)零配置。

入口(entry)

entry用來指引Webpack應(yīng)該從哪個(gè)模塊開始埋心,它是構(gòu)建的入口指郁。之后Webpack會(huì)自動(dòng)找出應(yīng)用內(nèi)其他相互依賴的內(nèi)容進(jìn)行打包。默認(rèn)配置如下:

 model.exports={
  entry:'./src/index.js'
}

出口(output)

定義Webpack所構(gòu)建的bundle在哪里輸出拷呆,默認(rèn)的輸出路徑是dist/main.js闲坎。

Loaders和Plugins

Loaders和plugins是webpack的核心。常用的Loaders和plugins如下:

  • Babel-loader
  • css-loader
  • sass-loader
  • postcss-loader
  • style-loader
  • url-loader
  • file-loader
  • MiniCssExtractPlugin

Webpack DevServer

Webpack為我們提供了一個(gè)隨時(shí)可用的開發(fā)web服務(wù)器茬斧,它將幫助我們大幅縮短編譯時(shí)間腰懂,為我們提供一個(gè)HTTP URL來訪問HTML頁(yè)面(而不是文件協(xié)議),甚至可以在JavaScript项秉、CSS等發(fā)生變化時(shí)重新編譯打包并重新加載頁(yè)面绣溜。

安裝

$ npm install --save-dev webpack-dev-server

配置

module.exports = {
    devServer: {
        port: 9000,
        contentBase: path.resolve(__dirname, ' build' )
    },
    // ...
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市娄蔼,隨后出現(xiàn)的幾起案子怖喻,更是在濱河造成了極大的恐慌底哗,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件锚沸,死亡現(xiàn)場(chǎng)離奇詭異跋选,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)咒吐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門野建,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人恬叹,你說我怎么就攤上這事候生。” “怎么了绽昼?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵唯鸭,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我硅确,道長(zhǎng)目溉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任菱农,我火速辦了婚禮缭付,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘循未。我一直安慰自己陷猫,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布的妖。 她就那樣靜靜地躺著绣檬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪嫂粟。 梳的紋絲不亂的頭發(fā)上娇未,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音星虹,去河邊找鬼零抬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛宽涌,可吹牛的內(nèi)容都是我干的媚值。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼护糖,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼褥芒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤锰扶,失蹤者是張志新(化名)和其女友劉穎献酗,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坷牛,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡罕偎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了京闰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颜及。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蹂楣,靈堂內(nèi)的尸體忽然破棺而出俏站,到底是詐尸還是另有隱情,我是刑警寧澤痊土,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布肄扎,位于F島的核電站,受9級(jí)特大地震影響赁酝,放射性物質(zhì)發(fā)生泄漏犯祠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一酌呆、第九天 我趴在偏房一處隱蔽的房頂上張望衡载。 院中可真熱鬧,春花似錦隙袁、人聲如沸月劈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至惭墓,卻和暖如春坛梁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背腊凶。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工划咐, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钧萍。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓褐缠,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親风瘦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子队魏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • 前言 本文主要從webpack4.x入手,會(huì)對(duì)平時(shí)常用的Webpack配置一一講解,各個(gè)功能點(diǎn)都有對(duì)應(yīng)的詳細(xì)例子胡桨,...
    kingsley2036閱讀 738評(píng)論 0 2
  • 前言 本文主要從webpack4.x入手官帘,會(huì)對(duì)平時(shí)常用的Webpack配置一一講解,各個(gè)功能點(diǎn)都有對(duì)應(yīng)的詳細(xì)例子昧谊,...
    BetterChen閱讀 1,952評(píng)論 0 3
  • 一刽虹、什么是webpack,為什么使用它呢诬? 1.1 什么是webpack涌哲? webpack是一個(gè)模塊打包工具,在開發(fā)...
    wave浪兒閱讀 546評(píng)論 0 1
  • 配置前說明:確保已安裝node環(huán)境尚镰。 檢查是否安裝node環(huán)境: 一阀圾、配置前命令簡(jiǎn)寫說明: 1、npm i 和np...
    u5f20u5929u8000閱讀 1,484評(píng)論 3 7
  • 這是我學(xué)習(xí)webpack的過程钓猬,后面會(huì)持續(xù)更新稍刀,大家可以跟著來學(xué)習(xí),下面正文開始敞曹。 什么是Webpack WebP...
    hengist閱讀 3,102評(píng)論 0 3