前言可以跳过，往下看。本来，我想完成这个教程。但是回过头来看自己写的东西，感觉已经表达了意思，不知道怎么用，让人读起来会有些乏味。我也刚开始写文章。我正在学习如何写有趣而不乏味的文章。我会一步一步地走下去。前言刚接触webpack的人会觉得它相当复杂。网上的教程都罗列了一堆选项和配置（我写的也是一样。。。哈哈），有时间就看看。.我也是这么学的。这个想法是不可接受的。后来啃文档看网上教程，自己配置。webpack真的不难找，毕竟是个工具，如果不好用，那为什么还有那么多人用，对不对？找到正确的学习方法，就很容易理解了。我觉得webpack可以当角色养成游戏来玩，哦不，快来学习吧。1、在游戏设定中，有一个员工叫wpboy（来自webpack，以下也称。），在一个叫Web的公司工作，他的工作是处理一些文件。我们玩家需要武装wpboy，让他能够处理boss交给的各种任务，防止他在开会的时候被boss点名批评。那么我们就来看看wpboy的基本属性吧。module.exports={条目：__dirname+'/src/main.js'，输出：{路径：__dirname++'/build'，文件名：'bundle.js'}};2.开始游戏，在Boss上摸摸一天告诉wp小子，你能不能提高一下你的打包文件技巧，小心我批评你。这个时候我们玩家就会让wpboy学习新的封装技术。我在哪里可以找到它？别慌，这个游戏有官方资源库。里面有各种各样的技能书、饰品、装饰品等等，大家可以点击资源商店进去看看里面都有什么。好了，找到了eval-source-map的技能书，点击学习。module.exports={....//其他配置devtool:'eval-source-map'};对BOSS不满，只好加强属性。老板：虽然打包快了，但是有些文件是错误的，你没发现吗，注意了。wpboy战战兢兢，需要玩家帮他渡过难关。转到资源商店，看看有什么帮助。找到一个附件webpack.NoEmitOnErrorsPlugin记录错误，我们玩家可以知道哪里出了问题并修复它，赶紧带上。modul.exports={...//其他属性pilugins:[newwebpack.NoEmitOnErrorsPlugin()]}老板：wp小子，你不是发现了很多重复文件吗？另外，你有没有添加新修改的文??件，请不要显示。我去了，竟然在中间发现同一个文件，秦始皇的长生不老药不是给我的，是给你的。幸运的是，我找到了可以删除重复项的webpack.optimize.DedupePlugin附件。devServer工具虽然资源库里没有，但是楼下小卖部就可以拿到。听说把hotgem放到这个工具里可以自动更新包。戴上试试看。webpack.optimize.DedupePlugin，已被删除。感谢@LowryTang指出。modul.exports={...//其他属性devServer:{host:'localhost',port:8080,hot:true},pilugins:[...newwebpack.optimize.DedupePlugin()]}你要我Can你会说文言文吗？老板：他们最近表现不错。公司最近收购了一些未来的文言文，请将其翻译成现代文。什么鬼，文言文？还是未来？我的天啊。我搜索了整个资源商店，但没有找到合适的。好在楼下的食堂神通广大，还有通天塔这种逆天装备，不过听说这装备的属性还得自己配置。//.babelrc{"presets":["env","stage-2"],"plugins":["transform-runtime"]//可以理解为设备的插槽。简单的用法在之前的文章中已经讲过了。}//webpack.config.jsmodule.exports={...//其他属性module:{rules:[{test:/\.js$/,loader:'babel-loader'}]}}，最后一篇写了这个不知道效果如何，主要想说明的是webpack真的不难。面对不同的场景，可以给wpboy匹配不同的属性。虽然以上只是一个很简单的配置，你也可以得到一个完整状态的wpboy，但是我想让你换个角度去学习，让学习变得有趣。感谢收看。总结
