webpack碎片知識整理

1.關(guān)于NODE_ENV

通常情況下我們習(xí)慣將npm run devnpm run build分別對應(yīng)開發(fā)環(huán)境和生產(chǎn)環(huán)境

package.json文件中一般要設(shè)置mode值:--mode=development--mode=production篓跛,

這里設(shè)置和webpack.config.js中設(shè)置mode是一個意思禾嫉,官方文檔說此時設(shè)置會將process.env.NODE_ENV設(shè)置為對應(yīng)值,但是在webpack.config.js中打印值時并沒有看到現(xiàn)象,在查證的過程中發(fā)現(xiàn)webpack文檔的說法有兩種,https://www.webpackjs.com/concepts/mode/的說法是:

webpack --mode=production 會將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin故源。

https://webpack.docschina.org/concepts/mode/的說法是:

webpack --mode=production 會將 DefinePluginprocess.env.NODE_ENV 的值設(shè)置為 development。啟用 NamedChunksPluginNamedModulesPlugin

細(xì)微差別但是實際差很多汞贸,如果按照前者所說绳军,在webpack.config.js中應(yīng)該直接獲取到NODE_ENV的值,實際并沒有獲取到矢腻。

由此可見并不能通過--mode=development的值設(shè)置全局process.env.NODE_ENV门驾,那么只能通過NODE_ENV=development和NODE_ENV=production來設(shè)置了。

2.cross-env

windows在使用NODE_ENV=production時會報異常踏堡,因此需要使用cross-env進(jìn)行設(shè)置

3.loader相關(guān)說明

  • loader全部都寫在module的rules里
  • 常見的loader有:
    • babel-loader(處理js猎唁,可以將ES6語法轉(zhuǎn)為ES5以下),
    • css-loader等顷蟆,包括less-loader和style-loader诫隅,處理樣式,支持樣式引用和less語法帐偎,
    • url-loader逐纬,處理樣式中的圖片和字體處理
    • html-withimg-loader,處理html中的本地圖片(一般將圖片資源放在oss上)

4.文件路徑問題

  • 起因:路徑填寫的是基于開發(fā)時的路徑削樊,在打包成一個文件后路徑修改為基于html 文件的豁生,這時需要使用url-loader,然而在css文件中引入img時漫贞,會因為url-loader的設(shè)置引起錯誤
  • 不想寫了甸箱,這人寫的挺好的看這個吧 https://juejin.im/post/5b8d1e926fb9a019b66e4657

5.package設(shè)置script問題

待更新

6.自定義插件

插件中必須有apply方法,否則在使用插件時會報錯:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[0] misses the property 'apply'.
function
   -> The run point of the plugin, required method.

常見拼寫錯誤

例如plugins拼成plugin時:

-configuration has an unknown property 'plugin'

loader中

optionspresets拼成了preset

Error: Unknown option: .preset. Check out ······
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末迅脐,一起剝皮案震驚了整個濱河市芍殖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌谴蔑,老刑警劉巖豌骏,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異隐锭,居然都是意外死亡窃躲,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門钦睡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蒂窒,“玉大人,你說我怎么就攤上這事荞怒∪髯粒” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵挣输,是天一觀的道長纬凤。 經(jīng)常有香客問我,道長撩嚼,這世上最難降的妖魔是什么停士? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮完丽,結(jié)果婚禮上恋技,老公的妹妹穿的比我還像新娘。我一直安慰自己逻族,他們只是感情好蜻底,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著聘鳞,像睡著了一般薄辅。 火紅的嫁衣襯著肌膚如雪要拂。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天站楚,我揣著相機與錄音脱惰,去河邊找鬼。 笑死窿春,一個胖子當(dāng)著我的面吹牛拉一,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播旧乞,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼蔚润,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了尺栖?” 一聲冷哼從身側(cè)響起嫡纠,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎决瞳,沒想到半個月后货徙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡皮胡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年痴颊,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屡贺。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡蠢棱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出甩栈,到底是詐尸還是另有隱情泻仙,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布量没,位于F島的核電站玉转,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏殴蹄。R本人自食惡果不足惜究抓,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望袭灯。 院中可真熱鬧刺下,春花似錦、人聲如沸稽荧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至畅卓,卻和暖如春擅腰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背髓介。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工惕鼓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留筋现,地道東北人唐础。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像矾飞,于是被迫代替她去往敵國和親一膨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361