webpack和gulp、grunt的区别

grunt/gulp的核心是Task 我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css） 之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。

所以grunt/gulp也被称为前端自动化任务管理工具。

我们来看一个gulp的task 下面的task就是将src下面的所有js文件转成ES5的语法。 并且最终输出到dist文件夹中。

什么时候用grunt/gulp呢？

如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。

只需要进行简单的合并、压缩，就使用grunt/gulp即可。

但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。

所以，grunt/gulp和webpack有什么不同呢？

grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

Webpack是一个前端模块化方案，更侧重模块打包。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
Webpack就是需要通过其配置文件（Webpack.config.js）中 entry 配置的一个入口文件（JS文件），然后在解析过程中，发现其他的模块，如scss等文件，再调用配置的loader或者插件对相关文件进行解析处理。

本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。