Webpack入门教程

webpack入门

webpack可以看作是现代Javascript应用程序的静态模块打包器。当webpack处理你的应用程序时，它会根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。（另一种模块化解决方案browserify，这里不作讨论。）

webpack和grunt以及gulp相比有什么特性

webpack：提供了一种前端模块化解决方案（和requirejs类似却又有不同，按照amd规范写的js可以通过requirejs在线解释执行，而webpack提供的是一种预编译模块的方案，编译之后发布到线上可以在浏览器中直接运行）。

grunt/gulp:前端自动化工具，主要用于优化前端工作流程。比如自动刷新页面，代码检测，压缩合并代码，预编译scss，less，文件生成md5戳等。

其实两者并没有太多的可比性，但是webpack的优点使得它可以在很多场景下替代grunt、gulp类的工具。

（推荐gulp：由于gulp核心api比较少（gulp.src，gulp.dest，gulp.task，gulp.watch），切其是基于流的形式进行文件的处理，并且坚持代码优于配置的策略，使得使用gulp更简单高效。）

grunt和gulp的具体实现这里不作讨论，下面我们主要学习webpack的使用技巧。