[Webpack并不难]把它当人物养成游戏吧。

andot 发布于2019-08-22 11:17 / 1080人阅读

摘要：发觉其实真的不难，毕竟它是一个工具，如果用起来都不顺手，那为什么那么多人用，是不是。我觉得可以把当成人物养成游戏来玩，哦不，来学。听说把宝石放进这工具就能自动更新打包。公司最近弄来了一些未来的文言文，你把它翻译成现代文吧。

前言

这段可以跳过看下面的。

本来，这个教程想完结的了。但回头看自己写的，感觉就像写明了什么意思，具体怎么使用都没说明白，而且让人看得会有点乏味吧。

我也是刚开始写文章，在学习怎样可以写好有趣味性而且学东西起来又不枯燥的文章，一步一步坚持走下去咯。

序言

刚接触 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仔 ，可我想让大家换个角度学习，这样学起来乐趣很多。

谢谢观看。

总结

超融合服务器 idc机房托管区块链养成游戏开发游戏吧养成不难

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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