Loader和Plugin的不同？

最新推荐文章于 2024-07-19 18:19:33 发布

卖菜的小白

最新推荐文章于 2024-07-19 18:19:33 发布

阅读量6k

点赞数 4

分类专栏： webpack 文章标签： webpack loader plugin

本文链接：https://blog.csdn.net/weixin_47450807/article/details/124192367

版权

本文主要总结了webpack的Loader和Plugin的区别。Loader用于转化文件，如处理CSS和图片等，只专注于文件打包，运行在NodeJS环境中。而Plugin则更加强大，不仅能扩展webpack功能，还能进行打包优化、环境变量重定义等多种任务，如CommonChunkPlugin用于优化代码分隔。Plugin可携带参数，并通过new实例化。

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

一、写在前面
之前面试官就问道loader和plugin有什么不同？当时只是根据自己脑子里面想的进行回答，所以今天就总结一下两者的区别。
二、具体总结
loader:loader从字面的意思理解，是加载的意思。由于webpack 本身只能打包js文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。loader是运行在NodeJS中。仅仅只是为了打包，仅仅只是为了打包，仅仅只是为了打包，重要的话说三遍！
如：css-loader和style-loader模块是为了打包css的
babel-loader和babel-core模块时为了把ES6的代码转成ES5
url-loader和file-loader是把图片进行打包的。
plugin: plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能