前端构建工具 webpack

一.自我初级认知  （是什么？     能干什么，有卵用？       有选择为何要选你？（比较优点在哪） ）     适合的才是最好的

      模块打包器（module bundler）     根据项目需求合并代码，而且支持按需加载。

　　1.将混在页面中的图片文件、js文件、css文件抽取出来，解除依赖。

　　2.模块系统主要解决模块的定义、依赖和导出.

      3.全局做用域下，也就是定义在 window 对象中。

      4.webpack实现的功能:

　　　　a：将依赖树拆分红按需加载的块

　　　　b：初始化加载的耗时尽可能少

　　　　c：各类静态资源均可以视做模块

　　　　d：将第三方库整合成模块的能力

　　　　e：能够自定义打包逻辑的能力

　　　　f：适合大项目，不管是单页仍是多页的 Web 应用

　　5.编译后缓存到内存中去。

　　6.webpack的理念是基于项目处理的，把对应的文件格式给对应的loader处理，而后你就不用管了，它会决定怎么压缩，编译。  

         配置文件：用规定的语法描述你要干什么！  怎么干是工具的事！    就像给方法传递参数同样。

 

二：webpack配置

      1.entry：配置要打包的文件的入口;能够配置多个入口文件

      2.output:配置输出文件的路径，文件名。  出口

　　3.resolve:配置文件后缀名        

　　4.module(loaders)： 配置要使用的loader（注意loaders的处理顺序是从右到左的）     编译过程当中加载的资源拦截作处理

　　5.plugins： 配置要使用的插件

      配置目录结构和详解：  网上看别人的，github！    http://www.imooc.com/article/4617

　　

　　

      

 

 

三：学习参考资源

     http://www.jirengu.com/app/watch/1433/1?vsum=2（入门视频哦！至关的详细）

      0.https://zhuanlan.zhihu.com/p/24888828?refer=study-fe（饥人谷不错的博客哦）

　　1.http://www.jianshu.com/p/b95bbcfc590d     http://www.cnblogs.com/zhengjialux/p/5861845.html (基础教程)

　　2.http://webpackdoc.com/module-system.html(官方中文文档：简单易懂，至关不错)

      3.https://webpack.js.org/concepts/（官网，很是的不错哦！ 练习英文阅读能力）

         http://webpack.github.io/docs/list-of-plugins.html（同上哦）

         http://survivejs.com/webpack/webpack-compared（构建工具比较文档）

      4.https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine(知乎)

　　5.http://www.open-open.com/lib/view/open1471590235833.html（项目发布必看）

      6.http://www.cnblogs.com/liuyt/p/5810042.html(css autoprefixer!)

         http://blog.csdn.net/github_26672553/article/details/52107165

      7.http://www.cnblogs.com/tugenhua0707/p/4793265.html（有实例demo哦，不错）

      8.https://segmentfault.com/a/1190000002551952（入门必看哦！ 这个至关的nice）

 

 

四：遇到的坎儿

      1.人必须首先学会靠本身！不能期望别人！ 成年人了！

      2. webpack没法生成目录和文件？ 

          答：命令的问题； webpack才是编译处理哦！  webpack-dev-server处理后编译的结果在内存中。

　　3.读人家的webpack配置文件哦！ 不懂得查资料学习！
　　4.看报错信息 认真的看！

　　   

 

其余同类工具：

1.gulp  grunt

2.http://fis.baidu.com/fis3/docs/beginning/release.html#/docs/beginning/release.html#CssSprite%E5%9B%BE%E7%89%87%E5%90%88%E5%B9%B6  （百度的哦 文档是中文的）

 

 

 

 

 

 

 

 

 

 

 

疑惑：

1.自动化构建工具、模块规范、模块化管理工具 ？ 

   答：会用 Less 去写 CSS，会用 Jade 去写 HTML，会用 Browserify 去模块化、为非覆盖式部署的资源加 MD5 戳等等。全部的一切，若是用手动来作，简直要疯              了！而自动化构建工具，就是为咱们完成这一套重复而机械的工做的。

          https://www.zhihu.com/question/35595198/answer/67223812

          https://segmentfault.com/q/1010000004217785/a-1020000004217853

2.npm？   npm仓库？   

3.镜像？  

4.语法糖： duck type，人本接口，最小接口，约定优于配置，广义来说都是一些思想上的"语法糖"。

                增长程序的可读性，从而减小程序代码出错的机会。