webpack概念

gulp和webpack区别,且没啥可对比性，是作用不同的工具

• gulp
  • 是自动化工具
• webpack
  • 是模块化打包机
  • 可以将浏览器不识别的文件，如scss ts vue等文件通过loader的方法进行编译，供浏览器识别

为什么现在都使用webpack？

• 都用模块化开发

模块化开发方案有哪些？

• commonJS
  • node 后端
• requireJS
  • AMD 前端
• seaJS
  • CMD 前端
• module
  • ECMA 前端

模块化开发可以帮我们解决全局变量冲突、文件引入的优先级问题、多人协作、代码的迭代。但是模块化开发也会有一些问题，如es6，es7,es8,es9语法，浏览器不支持，此时我们需要一个编译工具将它们编译成浏览器可识别的内容，这时候webpack就登场了。

• 如、将入口的多个js模块转化为一个模块输出
• 如、可以将sass进行打包编译成css

使用webpack搭建环境

• 开发环境
  • src
• 测试环境
  • test
• 生产环境
  • dist

webpack工作原理

webpack通过一个入口文件，将入口文件所依赖的所有模块通过loader的方式进行打包成一个或者多个模块