Webpack 并不难：把它当人物养成游戏吧
Posted SegmentFault
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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'
}
};
二. 游戏开始
小试身手
一天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宝石放进这工具就能自动更新打包。装上去试试。
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仔，可我想让大家换个角度学习，这样学起来乐趣很多。
谢谢观看。未完待续，敬请期待......
相关文章推荐
以上是关于Webpack 并不难：把它当人物养成游戏吧的主要内容，如果未能解决你的问题，请参考以下文章