webpack、rollup、parcel优劣？

最新推荐文章于 2024-07-17 15:35:21 发布

大唐荣华

最新推荐文章于 2024-07-17 15:35:21 发布

阅读量848

点赞数 2

分类专栏：大前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_40599109/article/details/108452118

版权

本文将探讨前端构建工具webpack、rollup和parcel的特性、优势及适用场景，帮助开发者选择合适的构建工具。webpack以其强大的模块管理和插件系统著称，适合大型复杂项目；rollup以简洁高效闻名，适用于库和框架的构建；而parcel则以零配置、快速上手为亮点，适合小型项目和快速原型开发。

摘要由CSDN通过智能技术生成

                    
   对比
   Webpack
   Rollup
   Parcel
  
   功能
   为处理资源管理和分割代码而生，可以用来处理任何类型的文件，灵活，插件多。
   用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。
   用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。
  
   配置
   webpack需要配config文件，指明entry, output, plugin，transformations。
   rollup需要配config文件，指明entry, output, plugin，transformations。rollup 有对import/export所做的node polyfills，webpack没有。rollup支持相对路径，而webpack没有，所以得使用path.resolve/path.join。
   parcel则是完全开箱可用的，不用配置。
  
   入口文件
   webpack只支持js文件作为入口文件，如果要以其他格式的文件作为入口，比如html文件为入口，如要加第三方Plugin。
   rollup可以用html作为入口文件，但也需要plugin，比如rollup-plugin-html-entry。
   parcel可以用index.html作为入口文件，而且它会通过看index.html的script tag里包含的什么自己找到要打包生成哪些js文件。
  
   transformations
   transformations指的是把其他文件转化成js文

对比	Webpack	Rollup	Parcel
功能	为处理资源管理和分割代码而生，可以用来处理任何类型的文件，灵活，插件多。	用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。	用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。
配置	webpack需要配config文件，指明entry, output, plugin，transformations。	rollup需要配config文件，指明entry, output, plugin，transformations。rollup 有对import/export所做的node polyfills，webpack没有。rollup支持相对路径，而webpack没有，所以得使用path.resolve/path.join。	parcel则是完全开箱可用的，不用配置。
入口文件	webpack只支持js文件作为入口文件，如果要以其他格式的文件作为入口，比如html文件为入口，如要加第三方Plugin。	rollup可以用html作为入口文件，但也需要plugin，比如rollup-plugin-html-entry。	parcel可以用index.html作为入口文件，而且它会通过看index.html的script tag里包含的什么自己找到要打包生成哪些js文件。
transformations	transformations指的是把其他文件转化成js文