详细说明基于webpack和vue.js的开发环境

序

举起中指对产品发火后，真正解决问题的是自我改变。有句话说，你不能改变整个世界，但你有机会改变自己。秉承“不听老人言，眼前亏”的优良作风，我决定玩火自焚。

问题在哪里

以前的项目总结如下：

1.AMD模块规范开发，使用requirejs实现和rjs打包，最后的结果是输出项目像狗一样臃肿和膨胀.不忍直视。

2、用大口进行包装，这似乎没有呕吐的地方，毕竟这是被咕哝折磨的.

3.数据的呈现使用模板引擎，这意味着您必须手动管理DOM，以便您的业务代码与您的数据处理、DOM管理和全屏羊毛混合在一起.

4.模块化不足。虽然模块管理是使用request进行的，但是大部分的业务逻辑仍然被填充在一个文件中，这与最近流行的组件化概念不兼容，并且拒绝落后.

5、比如扩展性和可维护性，我觉得是不言而喻的，所以不需要赘述。如果我再描述一遍，TM会很累赘。

新框架下需要解决的问题：

1.让输出项目像隔壁小姐姐一样瘦。(可能是营养不良)

2.要实现真正的模块化和基于组件的开发模式，需要解决维护和扩展困难的问题。(从现在开始，我不怕产品)

3.业务逻辑重在数据处理，手工管理DOM的时代就像……是什么样子？(毕竟成人产品越来越自动化了)

等等.(其实好处没必要重复，快来往下看)

为了实现上述目标，我们来讨论一下解决方案：

1.为什么老项目产出臃肿？

答：因为require的rjs用于构建和打包，所以每个了解rjs的人都知道它会将项目的所有依赖项打包在一个文件中。如果项目中有很多页面依赖于这个模块，rjs不会将这个模块提取为公共模块，所以会有很多重复的内容，所以项目自然会臃肿。

解决方案：使用webpack和相应的加载器完成模块加载和构建工作。

2.为什么老项目缺少模块化？

答：老项目的模块化只体现在js层面，解决了模块引用的问题，但在开发方法上，还是可以看作是程序化的，导致项目扩展和维护的难度，让开发人员在与产品对抗时感到不安。

解决方案：Vue.js可以解决组件化的问题，配合Vue.js提供的官方vue-loader，用webpack做一个组件化的开发架构。

3.如何避免手工管理DOM？

a:如果你是做数据显示的开发工作，相信你一定有很深的体会。向服务器发送http请求，获取返回的数据后手动将DOM渲染到页面，是最原始的开发方法。无非就是增加一个模板引擎之类的，但是手工渲染最终是不可避免的。如果页面逻辑复杂，比如给你一个翻页功能和一个过滤项，估计世界也没那么美好。

解决方案：MVVM模式可以很好的解决这个问题，Vue.js的核心是MVVM。

webpack

你一定听说过webpack。如果你直接描述什么是webpack，你可能感觉不到它的好处。在那之前，我相信你一定用过大口或咕噜。如果你没有用过它，至少你一定听说过它，知道大口和咕噜是做什么的。如果你不知道这一点，你就不是一个合格的前端开发人员。这篇文章不适合你。可以从最基础的地方慢慢学。

每个前端开发人员都应该熟悉吞咽和咕噜声。它们为前端提供了自动构建的能力。他们有自己的生态圈，有很多插件，这让我们告别了刀耕火种的时代。然而，它们没有解决模块加载的问题。例如，我们以前的项目是使用glow构建的，但是模块化工作仍然需要由require和rjs完成。除了完成一些其他任务之外，grave还帮助我们避免手动执行命令。

网络包是不同的。webpack的哲学是一切都是一个模块，无论是JS/CSS/sass/img/coffeejs/TTF等等。webpack可以使用自定义的加载器将所有资源作为模块加载，从而解决了模块依赖的问题，同时，使用插件也可以优化项目。由于模块加载和项目建设优化是通过webpack来解决的，所以模块加载和项目建设优化不是有机分离的，而是有机结合的，这使得webpack在这方面做得更好，这也是webpack的优势所在。

如果你看不懂上面的描述，没关系，你只需要知道以下几点：

1.在过去，使用require和rjs的模块加载模式可以由webpack提供的指定加载器来代替，或者您可以自己开发一个加载特定资源的加载器。

2.在过去，grunt和grunt被用来优化项目构建，这可以被webpack提供的插件和特定配置所取代。

3.由于模块和项目的加载