Webpack,gulp,grunt 等构建工具了解多少，它们有什么区别？Webpack的入口文件如何配置,Webpack的loader和plugins的区别

Webpack,gulp,grunt 等构建工具了解多少，它们有什么区别？

Webpack与Gulp、Grunt没有什么可比性，Webpack可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。主要用于模块化方案，预编译模块的方案。

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译替代手工实现自动化工作，主要是：1.构建工具2.自动化3.提高效率用。相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

Gulp较之grunt的优势
1 易用， Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
2 高效， Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
3 高质量 ，Gulp的每个插件只完成一个功能，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。而在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。
4 易学 ，Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
5 代码优于配置 ，维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

Webpack的入口文件如何配置

const path = require('path')
module.exports={
    //入口文件配置项
    entry:{entry:'./src/entry.js'},
    //出口文件配置项
    output:{
        //输出路劲
        path:path.resolve(__dirname,'dist'),
        // 输出文件名称
        filename:'bundle.js'
    },
    // 模块，例如解读css，图片转换压缩
    moudle:{},
    // 插件
    plugins:{},
    // 配置webpack开发服务功能
    devServer:{}
}

Webpack的loader和plugins的区别

loader 用于加载待打包的资源，plugin 用于扩展 webpack。
loader 用于加载某些资源文件。因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。