webpack2使用心得

(本文章還在持續(xù)更新中。壕翩。。傅寡。)
使用webpack做構(gòu)建也有一段時(shí)間了,記錄一下使用webpack的心得北救。
我們來看看官網(wǎng)對(duì)webpack的描述荐操。

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.
This document is intended to give a high-level overview of these concepts, while providing links to detailed concept specific use-cases.

簡(jiǎn)單來說,webpack是一個(gè)現(xiàn)代js應(yīng)用的模塊管理器珍策。他能正確處理模塊的依賴方式托启,并且把多個(gè)模塊打包成瀏覽器識(shí)別的小數(shù)量文件(通常來說只有一個(gè)文件,但是如果采用異步加載或者代碼拆包的化就有多個(gè)了)攘宙,webpack是基于配置式的屯耸,最核心的四個(gè)參數(shù)是入口、出口蹭劈、模塊加載器和插件疗绣。

入口、出口都好理解铺韧,我這里要補(bǔ)充一下output的publicPath參數(shù)多矮。默認(rèn)為/,它是主文件加載其他文件時(shí)的路徑前綴。比如你構(gòu)建時(shí)產(chǎn)生了多個(gè)js文件塔逃,主文件是app.js讯壶。app.js加載其他文件時(shí),會(huì)在路徑前面補(bǔ)全publicPath湾盗。

loaders是用于處理不同的文件伏蚊。因?yàn)閣ebpack是基于nodejs的,而nodejs默認(rèn)只能識(shí)別js文件格粪,所以less躏吊、json等文件需要相應(yīng)的loader來將文件轉(zhuǎn)換成js。loaders具有如下特點(diǎn):

  • 支持鏈?zhǔn)秸{(diào)用匀借,有先后順序颜阐,前一個(gè)loader的返回作為下一個(gè)loader的輸入
  • 最終要生成js
    常用的loader總結(jié)如下:
  • file-loader用于生成md5命名的文件
  • url-loader 將文章轉(zhuǎn)換成dataurl的方式
  • css-loader加載css文件∠爬撸可以解析里面的import凳怨,css模塊化。soucemap等
  • style-loader將js化的css包裹style標(biāo)簽是鬼,并嵌入到html中肤舞,一般配合css-loader使用
  • ts-loader解析typescript
    ...

plugin

如果說loader是對(duì)具體資源類型上對(duì)資源文件的轉(zhuǎn)換擴(kuò)展。那么plugin則相當(dāng)于在全局上做擴(kuò)展均蜜。官方推薦plugin插件一覽表
如果有多個(gè)chunk共享相同的依賴李剖,我們可以用CommonsChunkPlugin來提取相同的依賴性到當(dāng)獨(dú)的文件

resolve

這個(gè)配置很實(shí)用。在處理模塊依賴關(guān)系的時(shí)候囤耳,涉及到嵌套比較深的文件篙顺,我們很可能會(huì)寫出這樣的代碼

import Utility from '../../utilities/utility';

通過resolve.alias就可以設(shè)置一個(gè)別名,正確的讓webpack從該路徑中查找

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/')
}

通過resolve.modules可以指定node_modules的查找路徑充择,適用于一個(gè)大項(xiàng)目嵌套多個(gè)小項(xiàng)目的情況德玫,可以讓小項(xiàng)目共享相同的node_modules,但是如果是同一個(gè)包的不同版本,則不可用椎麦。

webpack的Code Splitting async

當(dāng)你的代碼打包后仍很大的時(shí)候宰僧,你就要考慮進(jìn)行代碼拆包了。把一些沒有必要立刻加載的代碼拆包观挎,并異步去加載琴儿。在webpack中,你可以通過import()和require.ensure來實(shí)現(xiàn)
import是es6的一個(gè)特性嘁捷,在webpack中造成。webpack會(huì)把import()命令識(shí)別成代碼切割的點(diǎn)(記住,import后面有括號(hào)包裹普气,包裹的為要加載的模塊路徑),而且webpack的import異步加載模塊是基于promise谜疤,這意味著低版本瀏覽器你需要加promise的polyfill。
而且import()需要你正確處理依賴項(xiàng),因?yàn)閣ebpack只是單純的將模塊當(dāng)獨(dú)拆包夷磕。如果需要處理依賴關(guān)系的化履肃,還是使用require.ensure比較合適。

webpck打包項(xiàng)目中包括第三方庫

在webpack打包中坐桩,經(jīng)常會(huì)遇到引用第三方庫的情況尺棋,這時(shí)候你可以將代碼打包成三塊(不包括拆包生成的小chunk)
1.webpack的模塊引入代碼。主要是webpackJsonp的實(shí)現(xiàn)和共同的代碼塊绵跷。
2.第三方庫
3.主要的業(yè)務(wù)代碼
要實(shí)現(xiàn)上述的三種分離膘螟。需要用到CommonsChunkPlugin來分離多次引用的chunk。用DllReferencePlugin和DllPlugin來分離第三方應(yīng)用碾局。
不過不建議通過這種方式打包第三方依賴庫荆残,還是直接使用第三方庫提供的dist版本吧,直接打包生成的可能是開發(fā)中版本而不是release版本净当。

externals的使用場(chǎng)景

如果在wepack中定義了externals内斯,webpack會(huì)在import、require的時(shí)候忽略對(duì)應(yīng)模塊像啼,并externals中對(duì)應(yīng)模塊的值賦給模塊俘闯。也就是說,該模塊不會(huì)被打包進(jìn)去最終的代碼忽冻。比如你externals設(shè)置了

并在代碼中對(duì)jquery進(jìn)行了引用

import jquery from "jquery"

webpack在打包的時(shí)候會(huì)在externals中匹配到j(luò)query真朗,從而只是簡(jiǎn)單的進(jìn)行變量替換

image.png

要注意的

webpack使用場(chǎng)景

1.處理代碼依賴。當(dāng)你項(xiàng)目復(fù)雜僧诚,需要引入許多靜態(tài)資源遮婶,而且靜態(tài)資源有依賴關(guān)系,優(yōu)先關(guān)系時(shí)
2.代碼的并包(多個(gè)靜態(tài)資源合并湖笨,在進(jìn)行模塊化開發(fā)一定會(huì)用到)
3.代碼的拆包(當(dāng)你的資源需要多個(gè)頁面復(fù)用而需要把共同的代碼分離蹭睡,以便用于瀏覽器緩存時(shí)。)
4.代碼構(gòu)建赶么,需要區(qū)分不同的生成環(huán)境時(shí)。(比如最常見的三層環(huán)境脊串。開發(fā)環(huán)境辫呻、測(cè)試環(huán)境、線上環(huán)境琼锋。你可以在開發(fā)環(huán)境搭建hmr來提高編譯效率放闺,在測(cè)試環(huán)境使用soucemap來方便測(cè)試debug,在線上環(huán)境壓縮混淆版本管理來減小帶寬消耗和利用緩存)

webpack調(diào)用方式

1.通過cli的方式(在終端中使用webpack命令缕坎,適合單獨(dú)文件需要簡(jiǎn)單處理的時(shí)候使用)
2.通過nodejs 的api方式 (適合多環(huán)境搭建的時(shí)候使用怖侦,比如區(qū)分開發(fā)環(huán)境、測(cè)試環(huán)境、線上環(huán)境等匾寝,如何區(qū)別搬葬?在cli中不同的命令指向不同的配置文件,不同的配置文件用define-plugin定義環(huán)境變量艳悔,在代碼中就可以直接使用這個(gè)變量了)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末急凰,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子猜年,更是在濱河造成了極大的恐慌抡锈,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件乔外,死亡現(xiàn)場(chǎng)離奇詭異床三,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)杨幼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門撇簿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人推汽,你說我怎么就攤上這事补疑。” “怎么了歹撒?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵莲组,是天一觀的道長。 經(jīng)常有香客問我暖夭,道長锹杈,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任迈着,我火速辦了婚禮竭望,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘裕菠。我一直安慰自己咬清,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布奴潘。 她就那樣靜靜地躺著旧烧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪画髓。 梳的紋絲不亂的頭發(fā)上掘剪,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音奈虾,去河邊找鬼夺谁。 笑死廉赔,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的匾鸥。 我是一名探鬼主播蜡塌,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼扫腺!你這毒婦竟也來了岗照?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤笆环,失蹤者是張志新(化名)和其女友劉穎攒至,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體躁劣,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡迫吐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了账忘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片志膀。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鳖擒,靈堂內(nèi)的尸體忽然破棺而出溉浙,到底是詐尸還是另有隱情,我是刑警寧澤蒋荚,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布戳稽,位于F島的核電站,受9級(jí)特大地震影響期升,放射性物質(zhì)發(fā)生泄漏惊奇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一播赁、第九天 我趴在偏房一處隱蔽的房頂上張望颂郎。 院中可真熱鬧,春花似錦容为、人聲如沸乓序。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽竭缝。三九已至,卻和暖如春沼瘫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背咙俩。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國打工耿戚, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留湿故,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓膜蛔,卻偏偏與公主長得像坛猪,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子皂股,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

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

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺墅茉,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,179評(píng)論 7 35
  • GitChat技術(shù)雜談 前言 本文較長呜呐,為了節(jié)省你的閱讀時(shí)間就斤,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,699評(píng)論 7 110
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,298評(píng)論 4 31
  • 喜歡籃球的人應(yīng)該對(duì)于科比·比恩·布萊恩特如雷貫耳蘑辑,他是NBA最好的得分手之一洋机,突破、投籃洋魂、罰球绷旗、三分球他都駕輕就熟...
    與與我無關(guān)閱讀 459評(píng)論 1 1
  • 前兩天刷微博看到這樣一句話: 學(xué)長學(xué)姐告誡學(xué)弟學(xué)妹們: 一定要在大學(xué)去嘗試一場(chǎng)校園戀愛衔肢,不管結(jié)果如何,至少你愛過豁翎,...
    一步之遙工作室閱讀 547評(píng)論 0 0