Webpack的Loader和Plugin的区别


Posted in Javascript onNovember 09, 2020

Loader

用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为data URL。比如说:CSS-Loader,Style-Loader等。

loader的使用很简单:

在webpack.config.js中指定loader。module.rules可以指定多个loader,对项目中的各个loader有个全局概览。

loader是运行在NodeJS中,可以用options对象进行配置。plugin可以为loader带来更多特性。loader可以进行压缩,打包,语言翻译等等。

loader从模板路径解析,npm install node_modules。也可以自定义loader,命名XXX-loader。

语言类的处理器loader:CoffeeScript,TypeScript,ESNext(Bable),Sass,Less,Stylus。任何开发技术栈都可以使用webpack。

Plugin

目的在于解决loader无法实现的其他事,从打包优化和压缩,到重新定义环境变量,功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件:CommonChunkPlugin主要用于提取第三方库和公共模块,避免首屏加载的bundle文件,或者按需加载的bundle文件体积过大,导致加载时间过长,是一把优化的利器。而在多页面应用中,更是能够为每个页面间的应用程序共享代码创建bundle。

webpack功能强大,难点在于它的配置文件,webpack4默认不需要配置文件,可以通过mode选项为webpack指定了一些默认的配置,mode分为:development/production,默认是production。

插件可以携带参数,所以在plugins属性传入new实例。

【Mode】可以在config文件里面配置,也可以在CLI参数中配置:webpack --mode=production(一般会选择在CLI,也就是npm scripts里面进行配置)。

在webpack4以下版本,webpack3.XX,通过plugins进行环境变量的配置。

【resolve】模块,resolver是个库,帮助webpack找到bundle需要引入的模块代码,打包时,webpack使用enhanced-resolve来解析路径。

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
 }
 }

 【Manifest】管理所有模块之间的交互。runtime将能够查询模块标识符,检索出背后对应的模块。

问题1:webpack通过使用bundle计算content hash作为文件名称,文件修改,新的content hash执向新的文件,缓存无效,但是文件内容没有修改,计算的hash还是会改变,因为,runtime和manifest的注入在每次构建都会发生变化。要想解决这个文件可以了解更多的runtime和manifest。

webpack原理:从配置文件定义的模块列表开始,处理应用程序,从入口文件开始递归构建一个依赖图,然后将所有模块打包为少量的bundle,通常只有一个,可由浏览器加载。

到此这篇关于Webpack的Loader和Plugin的区别的文章就介绍到这了,更多相关Webpack Loader和Plugin内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
解决vue初始化项目一直停在downloading template的问题
Nov 09 #Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 #Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 #Javascript
详解nginx配置vue h5 history去除#号
Nov 09 #Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 #Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 #Javascript
详解Vue中的watch和computed
Nov 09 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Django app配置多个数据库代码实例
2019/12/17 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
儿子婚宴答谢词
2014/01/09 职场文书
单身联谊活动方案
2014/01/29 职场文书
财经学院自荐信范文
2014/02/02 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
预备党员党支部意见
2015/06/02 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
Oracle中DBLink的详细介绍
2022/04/29 Oracle