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

前言

  • 这段可以跳过看下面的。
  • 本来,这个教程想完结的了。但回头看自己写的,感觉就像写明了什么意思,具体怎么使用都没说明白,而且让人看得会有点乏味吧。
  • 我也是刚开始写文章,在学习怎样可以写好有趣味性而且学东西起来又不枯燥的文章,一步一步坚持走下去咯。

序言

  • 刚接触 webpack 的人,会觉得蛮复杂的哦,网上的教程都是列出一堆选项和配置 (我写的也是这样….哈哈),那么就会等有时间再去看看吧。我刚学也是这样。这念头是不行的哦,后来啃文档和看网上教程,自己动手配置。发觉 webpack其实真的不难,毕竟它是一个工具,如果用起来都不顺手,那为什么那么多人用,是不是。
  • 找对学习的方法,才容易理解它。我觉得可以把 webpack 当成人物养成游戏来玩,哦不,来学。

一. 游戏设定

  • 有个叫wp仔webpack 来的,下面也这样叫了。)的员工,在名叫Web的公司上班,工作是处理一些文件。
  • 我们玩家就要武装 wp仔,让他能够处理 Boss 给各种各样任务,不让他被 Boss 在开会的时候点名批评。
  • 那我们来看看 wp仔 的基础属性吧。
module.exports = {
  entry: __dirname +'/src/main.js',
  output: {
    path: __dirname + + '/build',
    filename: 'bundle.js'
  }
};

二. 游戏开始

小试身手

  • 一天 Bosswp仔 说,你的打包文件技能能不能加强点啊,小心我批评你呀。
  • 这时,我们玩家就要让 wp仔 学习新的打包技术了。到哪里找?不要慌,这游戏有个官方资源库,什么技能书,饰品,配件,应有尽有,大家可以点资源商店,进去看看里面的东西。
  • 好啦,我们找到了一款 eval-source-map 的技能书,点击学习。
module.exports = {
    .... // 其他的配置
    devtool: 'eval-source-map'
};

Boss 的不满,只好加强属性。

  • Boss :虽然打包是快了,但有些文件错误,你没发现吗,注意下。
  • wp仔 瑟瑟发抖,玩家们要帮他度过难关啊。快去资源商店看看,找找看什么帮得上忙。
  • 找到了一个饰品 webpack.NoEmitOnErrorsPlugin 记录错误,我们玩家就可知道哪里出错然后去改咯,赶快带上。
modul.exports = {
    ... // 其他属性
    pilugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]
}
  • Bosswp仔 啊,你就没发现很多重复的文件吗?而且,刚修改过的文件有没有加进去啦,求求你别秀了。
  • 我去,连放在中间的相同文件都发现,秦始皇的长生不老药我都不服,就服你。
  • 还好,找到了 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仔 ,可我想让大家换个角度学习,这样学起来乐趣很多。

谢谢观看。

总结

    原文作者:徒步上山看日出
    原文地址: https://segmentfault.com/a/1190000012416205
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞