[Webpack并不難]把它當人物養成游戲吧。

andot 發布于2019-08-22 11:17 / 1211人閱讀

摘要：發覺其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什么那么多人用，是不是。我覺得可以把當成人物養成游戲來玩，哦不，來學。聽說把寶石放進這工具就能自動更新打包。公司最近弄來了一些未來的文言文，你把它翻譯成現代文吧。

前言

這段可以跳過看下面的。

本來，這個教程想完結的了。但回頭看自己寫的，感覺就像寫明了什么意思，具體怎么使用都沒說明白，而且讓人看得會有點乏味吧。

我也是剛開始寫文章，在學習怎樣可以寫好有趣味性而且學東西起來又不枯燥的文章，一步一步堅持走下去咯。

序言

剛接觸 webpack 的人，會覺得蠻復雜的哦，網上的教程都是列出一堆選項和配置（我寫的也是這樣....哈哈），那么就會等有時間再去看看吧。我剛學也是這樣。這念頭是不行的哦，后來啃文檔和看網上教程，自己動手配置。發覺 webpack其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什么那么多人用，是不是。

找對學習的方法，才容易理解它。我覺得可以把 webpack 當成人物養成游戲來玩，哦不，來學。

一. 游戲設定

有個叫wp仔（ webpack 來的，下面也這樣叫了。）的員工，在名叫Web的公司上班，工作是處理一些文件。

我們玩家就要武裝 wp仔，讓他能夠處理 Boss 給各種各樣任務，不讓他被 Boss 在開會的時候點名批評。

那我們來看看 wp仔 的基礎屬性吧。

module.exports = {
  entry: __dirname +"/src/main.js",
  output: {
    path: __dirname + + "/build",
    filename: "bundle.js"
  }
};

二. 游戲開始 小試身手

一天 Boss 跟 wp仔 說，你的打包文件技能能不能加強點啊，小心我批評你呀。

這時，我們玩家就要讓 wp仔 學習新的打包技術了。到哪里找？不要慌，這游戲有個官方資源庫，什么技能書，飾品，配件，應有盡有，大家可以點資源商店，進去看看里面的東西。

好啦，我們找到了一款 eval-source-map 的技能書，點擊學習。

module.exports = {
    .... // 其他的配置
    devtool: "eval-source-map"
};

Boss 的不滿，只好加強屬性。

Boss ：雖然打包是快了，但有些文件錯誤，你沒發現嗎，注意下。

wp仔 瑟瑟發抖，玩家們要幫他度過難關啊。快去資源商店看看，找找看什么幫得上忙。

找到了一個飾品 webpack.NoEmitOnErrorsPlugin 記錄錯誤，我們玩家就可知道哪里出錯然后去改咯，趕快帶上。

modul.exports = {
    ... // 其他屬性
    pilugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

Boss ：wp仔 啊，你就沒發現很多重復的文件嗎？而且，剛修改過的文件有沒有加進去啦，求求你別秀了。

我去，連放在中間的相同文件都發現，秦始皇的長生不老藥我都不服，就服你。

還好，找到了 webpack.optimize.DedupePlugin 飾品可以去掉重復的，而 devServer 工具雖然不是在資源店，是在樓下小賣部的獲得的。聽說把 hot寶石放進這工具就能自動更新打包。裝上去試試。

webpack.optimize.DedupePlugin，已被移除了。感謝@LowryTang指出。

modul.exports = {
    ... // 其他屬性
    devServer: {
        host: "localhost",
        port: 8080,
        hot: true
    },
    pilugins: [
        ...
        new webpack.optimize.DedupePlugin()
    ]
}

你還要我會文言文？

Boss：最近表現不錯。公司最近弄來了一些未來的文言文，你把它翻譯成現代文吧。

什么鬼，文言文？還是未來的？我的天。

找遍資源店都沒有適合，還好樓下小賣部神通廣大，居然有這 babel 這逆天的裝備，不過聽說要自己配置這裝備的屬性。

// .babelrc
{
  "presets": [
    "env",
    "stage-2"
  ],
  "plugins": ["transform-runtime"] //可以理解為裝備的插槽。之前文章中有說過簡單用法。
}

// webpack.config.js
module.exports = {
    ... // 其他屬性
    module: {
        rules: [
            {
              test: /.js$/,
              loader: "babel-loader"
            }
        ]
    }
},

最后

文章寫成這樣不知效果怎樣，但主要想說明的是，webpack 真不難，面對不同的場景給 wp仔 搭配不同的屬性。盡管上面說的只是很簡單的配置，你們也可以弄個滿狀態的 wp仔 ，可我想讓大家換個角度學習，這樣學起來樂趣很多。

謝謝觀看。

總結

GPU云服務器云服務器區塊鏈養成游戲開發游戲吧養成不難

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92113.html

[webpack并不難]總結

摘要：剛寫的時候，心里有很多小聲音寫不好的萬一寫錯，誤導別人怎么辦等等。最重要還是感謝你的支持。接下來還會寫些有趣的東西帶給大家。這個教程就此完結咯，兩周前的一個念頭也實現了。剛寫的時候，心里有很多小聲音：寫不好的 , 萬一寫錯，誤導別人怎么辦等等。萬事開頭難，寫著寫著就發現和之前看到的一句話很貼切，輸入一些東西很簡單的，但你要輸出確實比較難。使用教程（一）--- entry，...

forrest23 2019-08-22 11:18 評論0 收藏0
華登區塊狗怎么開發華登區塊狗源碼

摘要：華登區塊寵物狗是基于區塊鏈技術開發的全球唯一性可繁殖會增值可收藏且不可篡改的區塊鏈數字寵物，每只寵物狗都是獨一無二的個體，可愛唯一財富。華登區塊狗系統現成源碼聯系【佘經理135-6015-0274】，華登區塊狗定制系統開發、華登區塊狗APP系統開發、華登區塊狗平臺開發系統、華登區塊狗軟件開發。華登區塊寵物狗是基于區塊鏈技術開發的全球唯一性、可繁殖、會增值、可收藏且不可篡改的區塊鏈數...

ernest.wang 2019-07-01 14:06 評論0 收藏0
Vim 的哲學（二）

摘要：為什么要有模式呢以上其實已經講述了一些原因，但真正的價值還在于接下來要講到的哲學。鼠標與快捷鍵的操作治標不治本，它們沒能從根本上解決這個問題。學會用不同的角度去看待和理解這個世界，你收獲的永遠會比你想象的更多。上回我分享了如何掌握基礎移動的心得體會，而對于很重要的模式卻只是一帶而過，這其實是有原因的。過去我有過幾次教新手 Vim 的經歷，按照慣常的方式先告訴他們模式切換，...

ashe 2019-06-28 10:06 評論0 收藏0
密室逃生Egret游戲教程

摘要：這個類可以大大減少后期的代碼量，降低整體的耦合度。關鍵代碼是把位圖按照區域進行分割，顯示對象的滾動矩形范圍。這次給大家帶來的是通過Egret實現密室逃生小游戲的教程。該游戲包括人物狀態機、MVC設計模式和單例模式，該游戲在1.5s內通過玩家點擊操作尋找安全點，方可進入下一關，關卡無限，分數無限。下面是具體的模塊介紹和代碼實現。該游戲主要內容包括 **開始游戲場景游戲場景游戲結束結算...

elva 2019-08-23 12:12 評論0 收藏0
前端經典文章

摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，...

lowett 2019-08-22 13:58 評論0 收藏0