vue进阶知识点（2）——webpack介绍和安装

什么是webpack ？

• webpack是前端模块化打包工具

• sass less ts等开发的项目，部署到服务器，有一部分浏览器是不支持的，

• 还有使用ES6编写的代码，有一部分浏览器是不支持的，要用一些工具，打包转化成浏览器认识的代码

• 这时候就需要打包工具，有很多工具，比如gulp，webpack等可以帮我们打包

• 在项目开发中使用Commonjs，ES6等模块化语法，经过webpack打包之后，浏览器就可以识别了

• 在webpack中，除了可以转换JS文件以外，CSS,JSON和图片也会被当作模块来使用

webpack和gulp/grunt的区别

• gulp是打包工具

• gulp定义一些列的任务，形成任务流，号称“自动任务管理工具”

• 在开发中，如果各个文件依赖十分简单，就可以使用gulp实现合并，压缩等简单的任务，流程是自动化的

• 如果没有经过严格的配置，gulp是不能使用模块化的

• 而webpack是各种模块化都支持，而且打包过程中还帮助我们处理依赖关系

• 压缩合并对webpack来说只是简单的功能

webpack的安装

• webpack为了正常运行，依赖于node环境，

• node环境依赖各种包，手动管理这些包很麻烦，安装node的时候会安装npm工具

• npm工具帮助我们管理node环境下的各种包

• 有了node环境，我们通过node里的npm工具来安装webpack

• 全局安装：npm install webpack@3.6.0 -g