Loader和Plugin的不同？

一、写在前面
之前面试官就问道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文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
插件可以携带参数，所以在plugins属性传入new实例。
针对html文件打包和拷贝（还有很多设置）的插件：html-webpack-plugin。不但完成了html文件的拷贝，打包，还给html中自动增加了引入打包后的js文件的代码（），还能指明把js文件引入到html文件的底部等等。
代码如下所示：

plugins:[
//对html模板进行处理，生成对应的html,引入需要的资源模块
new HtmlWebpackPlugin({template:'./index.html',//模板文件，即需要打包和拷贝到build目录下的html文件filename:'index.html',//目标html文件chunks:['useperson'],//对应加载的资源,即html文件需要引入的js模块inject:true//资源加入到底部，把模块引入到html文件的底部})
]

Loader和Plugin的不同？相关推荐

Webpack中Loader和Plugin的区别和编写思路
由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务一.区别前面两节我们有提到Loader与Plugin对应的概念,先 ...
webpack实战之手写一个loader和plugin
webpack实战之编写一个简易的loader和plugin
webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
Webpack自定义Loader和Plugin方法
手写Loader Loader 本质上是导出函数的 JavaScript 模块,而该模块导出的函数被称为 Normal Loader,在开发 Loader时,我们可以在导出的函数上添加一个 pitch ...
【前端知识之webpack】Loader和Plugin都是什么，有什么区别
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍Loader和Plugin都是什么,有什么区别. 文章目录前言一.Loader是什么二.Plugin是什么三.Loader和Plugin ...
Webpack 常用 loader 和 plugin 汇总
基于 Webpack 4 和 Webpack 5 Loader 名称描述 eslint-loader 代码规范检查.eslint-config-airbnb eslint-config-alloy ...
webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
webpack基础学习，各个loader和plugin的具体配置
一.邂逅Webpack Webpack是什么 webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序: 打包bundler:webpack可以将帮助我们进行打包,所以它是一个打 ...
Vue Cli3 添加Loader和plugin
添加loader 在vue.config.js中的chainWebpack中添加配置: chainWebpack: config => {// my-loader为loader的别名,./src ...

Loader和Plugin的不同？

Loader和Plugin的不同？相关推荐

最新文章

热门文章