在讲解webpack之前，我们先回顾一下笔者在项目开发中的工作流程变化。jquery时代，工作流大致是jquery结合插件处理视图，bootstap处理样式，lodash，underscore等库。结合phpstorm、chrome调试接口，angularjs1.x时代使用指令、服务、控制器将逻辑拆分到多个js文件中。使用sass编译css，scss会分为全局样式和组件样式。Bower此时下载各种依赖，需要手动管理各种依赖。lessthingstodo包括使用sass将css集中编译压缩成一个文件的问题。需要手动加载多个js文件，需要管理不同js文件的依赖关系。angularjs1.x+nodeevolutionversiongruntprocessingTask工作流程（中间也用到了gulp原理），核心任务包括watch文件变化，将sass编译工作放入其中，将单独的js文件打包混淆放入其中，使用browserify进行管理js依赖selenium测试前端接口层karma+mocha测试接口逻辑层npmscript+shell封装了数据库导入，运行测试等一些常用操作，此时需要手动加载资源，但是此时，只加载单个编译文件，少做包括js依赖的引入，减少工作流半自动化的问题。需要手动引入各种依赖。vue时代，使用vue-cli一键初始化项目。编写vue模板，修改路由文件，使用vuex、vue-source等工具处理业务逻辑。可以看到整个项目的开发已经从原来的资源引用方式，进化到基于后端节点的编译开发时代。webpack作为工具完成了哪些事情？它集成了从引入项目资源到编译打包的一系列工作。基于此某种程度上可以说，webpack可以理解为现代前端开发中的一个编译器（原谅我的概念定义），将各种前端资源编译打包成可以在浏览器端运行的程序。从这个角度出发，我们来看看webpack入门的核心概念。文件。类似于编译主文件，基于这个分析依赖输出输出文件，编译结果loaders加载器模块用于解析编译不同的文件类型，比如sass转css，typescript转js等plugins插件模块，并编译否执行同阶段的任务，比如压缩和混淆输出，启动http服务等。可以看到webpack会导入原始资源，编译，文件监控等任务，分散到基于loader和plugins的模块系统中.在工作模式上，webpack和Grunt、gulp几乎是一样的。两者都是基于插件系统。但要注意以下区别。Gulp和Gurnt更侧重于解决多个任务的集成。之所以用它来编译，是因为基于你配置的webpack更侧重于解决资源引用，编译打包，同时我们可以用插件做更多的事情。总结webpack的学习要点如下：学习核心配置选项；学习各种加载器模块的配置；使用webpack之前需要具备哪些基础知识？对前端编译工作流程有基本了解，知道为什么需要编译，知道编译的价值？最好使用browserify、grunt、gulp和其他类似的工具。有node的基础学习，比如，说说npm是怎么找依赖的？
