webpack

webpack -模块化加载器，同时支持amd，cmd等加载规范。

1、AMD模块规范开发，使用requirejs实现，使用rjs打包，最终导致的结果是，输出的项目臃肿，
肿的就像一坨狗不理……不忍直视
2、使用gulp进行打包，这一点貌似没有可吐槽的地方，毕竟都是被grunt折磨过来的……
3、数据的渲染使用模板引擎，这就意味着你要手动管理DOM，这样，你的业务代码参杂着
你的数据处理、DOM管理，满屏幕的毛线……
4、模块化不足，虽然使用require进行了模块管理，但是大部分业务逻辑还是充斥在一个文
件里，这与最近流行的组件化概念冰火不容，拒绝落后……
5、诸如 扩展性 、 维护性 我想早已不言而喻，不需赘述，再述就真TM是累赘了。

要解决的问题
1、要使构建输出的项目像你邻家小妹妹一样、瘦的皮包骨。
2、要实现真正的模块化、组件化的开发方式，真正去解决维护难、扩展难的问题。
（从此不怕产品汪）
3、业务逻辑专注数据处理，手动管理DOM的年代就像……像什么呢？
（毕竟成人用品也越来越自动化了）

解决方案tips

1. 为什么老项目构建臃肿不堪？
    基于requirejs进行打包，会把项目所有的一来都打包到一个文件里，如果项目中同时依赖一个模块，
rjs 并不能提取为公共模块。使用webpack配合响应loader，来完成加载和构建。

2.老项目为什么模块化不足？
    老项目的模块化，仅仅体现在js层面，解决了模块引用的问题，但在开发方式上，依然可以
看做是过程式的， 这样的结果就导致了项目的难扩展和难维护，让开发人员在与产品汪的对峙中，并不从容。

3、如何避免手动管理DOM？
    如果你在做数据展示这一块的开发工作，相信你一定体会颇深，发送http请求到服务端，
拿到返回的数据后手动渲染DOM至页面，这是最原始的开发方式，无非再加一个模板引擎之类的，
但最终还是避免不了手动渲染，如果页面逻辑复杂，比如给你来一个翻页的功能，再来一个筛选项，
估计你会觉得世界并不那么美好。

webpack 优势

1.代码分割：
  webpack支持二种依赖加载：同步和异步。同步的依赖会在编译时直接打包输出到目的文件。异步加载会单
独生成代码块，只有在浏览器中需要时才会异步加载这些代码块。
2.Loaders：
  默认加载js，通过loaders来把其他类型的资源转换成js输出。
3.各种插件
  webpack提供强大插件来提高工作效率。

安装

全局安装

npm i webpack -g

局部安装

同样也可以在项目中安装。
此时，应该先初始化npm项目

npm init
npm i webpack -save-dev

此时会写入到package.json中。

基本使用

——————待续-----