資訊專欄INFORMATION COLUMN
摘要：發(fā)覺其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什么那么多人用，是不是。我覺得可以把當(dāng)成人物養(yǎng)成游戲來玩，哦不，來學(xué)。聽說把寶石放進(jìn)這工具就能自動更新打包。公司最近弄來了一些未來的文言文，你把它翻譯成現(xiàn)代文吧。
前言
這段可以跳過看下面的。
本來，這個教程想完結(jié)的了。但回頭看自己寫的，感覺就像寫明了什么意思，具體怎么使用都沒說明白，而且讓人看得會有點乏味吧。
我也是剛開始寫文章，在學(xué)習(xí)怎樣可以寫好有趣味性而且學(xué)東西起來又不枯燥的文章，一步一步堅持走下去咯。
序言剛接觸 webpack 的人，會覺得蠻復(fù)雜的哦，網(wǎng)上的教程都是列出一堆選項和配置 （我寫的也是這樣....哈哈），那么就會等有時間再去看看吧。我剛學(xué)也是這樣。這念頭是不行的哦，后來啃文檔和看網(wǎng)上教程，自己動手配置。發(fā)覺 webpack其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什么那么多人用，是不是。
找對學(xué)習(xí)的方法，才容易理解它。我覺得可以把 webpack 當(dāng)成人物養(yǎng)成游戲來玩，哦不，來學(xué)。
一. 游戲設(shè)定有個叫wp仔（ webpack 來的，下面也這樣叫了。）的員工，在名叫Web的公司上班，工作是處理一些文件。
我們玩家就要武裝 wp仔，讓他能夠處理 Boss 給各種各樣任務(wù)，不讓他被 Boss 在開會的時候點名批評。
那我們來看看 wp仔 的基礎(chǔ)屬性吧。
module.exports = {
entry: __dirname +"/src/main.js",
output: {
path: __dirname + + "/build",
filename: "bundle.js"
}
};
二. 游戲開始
小試身手
一天 Boss 跟 wp仔 說，你的打包文件技能能不能加強(qiáng)點啊，小心我批評你呀。
這時，我們玩家就要讓 wp仔 學(xué)習(xí)新的打包技術(shù)了。到哪里找？不要慌，這游戲有個官方資源庫，什么技能書，飾品，配件，應(yīng)有盡有，大家可以點資源商店，進(jìn)去看看里面的東西。
好啦，我們找到了一款 eval-source-map 的技能書，點擊學(xué)習(xí)。
module.exports = {
.... // 其他的配置
devtool: "eval-source-map"
};
Boss 的不滿，只好加強(qiáng)屬性。
Boss ：雖然打包是快了，但有些文件錯誤，你沒發(fā)現(xiàn)嗎，注意下。
wp仔 瑟瑟發(fā)抖，玩家們要幫他度過難關(guān)啊?？烊?strong>資源商店看看，找找看什么幫得上忙。
找到了一個飾品 webpack.NoEmitOnErrorsPlugin 記錄錯誤，我們玩家就可知道哪里出錯然后去改咯，趕快帶上。
modul.exports = {
... // 其他屬性
pilugins: [
new webpack.NoEmitOnErrorsPlugin()
]
}
Boss ：wp仔 啊，你就沒發(fā)現(xiàn)很多重復(fù)的文件嗎？而且，剛修改過的文件有沒有加進(jìn)去啦，求求你別秀了。
我去，連放在中間的相同文件都發(fā)現(xiàn)，秦始皇的長生不老藥我都不服，就服你。
還好，找到了 webpack.optimize.DedupePlugin 飾品可以去掉重復(fù)的，而 devServer 工具雖然不是在資源店，是在樓下小賣部的獲得的。聽說把 hot寶石放進(jìn)這工具就能自動更新打包。裝上去試試。
webpack.optimize.DedupePlugin，已被移除了。感謝@LowryTang指出。
modul.exports = {
... // 其他屬性
devServer: {
host: "localhost",
port: 8080,
hot: true
},
pilugins: [
...
new webpack.optimize.DedupePlugin()
]
}
你還要我會文言文 ？
Boss：最近表現(xiàn)不錯。公司最近弄來了一些未來的文言文，你把它翻譯成現(xiàn)代文吧。
什么鬼，文言文？還是未來的？我的天。
找遍資源店都沒有適合，還好樓下小賣部神通廣大，居然有這 babel 這逆天的裝備，不過聽說要自己配置這裝備的屬性。
// .babelrc
{
"presets": [
"env",
"stage-2"
],
"plugins": ["transform-runtime"] //可以理解為裝備的插槽。之前文章中有說過簡單用法。
}
// webpack.config.js
module.exports = {
... // 其他屬性
module: {
rules: [
{
test: /.js$/,
loader: "babel-loader"
}
]
}
},
最后
文章寫成這樣不知效果怎樣，但主要想說明的是，webpack 真不難，面對不同的場景給 wp仔 搭配不同的屬性。盡管上面說的只是很簡單的配置，你們也可以弄個滿狀態(tài)的 wp仔 ，可我想讓大家換個角度學(xué)習(xí)，這樣學(xué)起來樂趣很多。
謝謝觀看。
總結(jié)文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92113.html
摘要：剛寫的時候，心里有很多小聲音寫不好的萬一寫錯，誤導(dǎo)別人怎么辦等等。最重要還是感謝你的支持。接下來還會寫些有趣的東西帶給大家。 這個教程就此完結(jié)咯，兩周前的一個念頭也實現(xiàn)了。剛寫的時候，心里有很多小聲音： 寫不好的 , 萬一寫錯，誤導(dǎo)別人怎么辦 等等。萬事開頭難，寫著寫著就發(fā)現(xiàn)和之前看到的一句話很貼切，輸入一些東西很簡單的，但你要輸出確實比較難 。 使用教程（一）--- entry，...
摘要：華登區(qū)塊寵物狗是基于區(qū)塊鏈技術(shù)開發(fā)的全球唯一性可繁殖會增值可收藏且不可篡改的區(qū)塊鏈數(shù)字寵物，每只寵物狗都是獨一無二的個體，可愛唯一財富。 華登區(qū)塊狗系統(tǒng)現(xiàn)成源碼聯(lián)系【佘經(jīng)理135-6015-0274】，華登區(qū)塊狗定制系統(tǒng)開發(fā)、華登區(qū)塊狗APP系統(tǒng)開發(fā)、華登區(qū)塊狗平臺開發(fā)系統(tǒng)、華登區(qū)塊狗軟件開發(fā)。 華登區(qū)塊寵物狗是基于區(qū)塊鏈技術(shù)開發(fā)的全球唯一性、可繁殖、會增值、可收藏且不可篡改的區(qū)塊鏈數(shù)...
摘要：為什么要有模式呢以上其實已經(jīng)講述了一些原因，但真正的價值還在于接下來要講到的哲學(xué)。鼠標(biāo)與快捷鍵的操作治標(biāo)不治本，它們沒能從根本上解決這個問題。 學(xué)會用不同的角度去看待和理解這個世界，你收獲的永遠(yuǎn)會比你想象的更多。 上回我分享了如何掌握基礎(chǔ)移動的心得體會，而對于很重要的模式卻只是一帶而過，這其實是有原因的。過去我有過幾次教新手 Vim 的經(jīng)歷，按照慣常的方式先告訴他們模式切換，...
摘要：這個類可以大大減少后期的代碼量，降低整體的耦合度。關(guān)鍵代碼是把位圖按照區(qū)域進(jìn)行分割，顯示對象的滾動矩形范圍。 這次給大家?guī)淼氖峭ㄟ^Egret實現(xiàn)密室逃生小游戲的教程。該游戲包括人物狀態(tài)機(jī)、MVC設(shè)計模式和單例模式，該游戲在1.5s內(nèi)通過玩家點擊操作尋找安全點，方可進(jìn)入下一關(guān)，關(guān)卡無限，分?jǐn)?shù)無限。下面是具體的模塊介紹和代碼實現(xiàn)。 該游戲主要內(nèi)容包括 **開始游戲場景游戲場景游戲結(jié)束結(jié)算...
摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...
閱讀 1972·2021-11-16 11:45
閱讀 3690·2021-09-06 15:02
閱讀 2033·2019-08-30 15:44
閱讀 2295·2019-08-30 11:21
閱讀 1860·2019-08-29 16:31
閱讀 3436·2019-08-29 13:55
閱讀 1907·2019-08-29 12:15
閱讀 3259·2019-08-28 18:05
