webpack 中,loader、plugin 的区别

  • loader 和 plugin 的主要区别:
  1. loader 用于加载某些资源文件。

    因为webpack 本身只能打包commonjs规范的js文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。从字面意思也能看出,loader是用于加载的,它作用于一个个文件上。

  2. plugin 用于扩展webpack的功能。

    它直接作用于 webpack,扩展了它的功能。当然loader也是变相的扩展了 webpack ,但是它只专注于转化文件(transform)这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。

原文地址:https://www.cnblogs.com/cag2050/p/9962678.html

时间: 2024-09-28 20:15:28

webpack 中,loader、plugin 的区别的相关文章

webpack中hash与chunkhash区别和需要注意的问题

项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存 原因是因为, hash 字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的.(所以每一次编译都会有一个新的hash,并不适用) 解决:不用hash,而用 chunkhash (js和css要使用chunkhash), ch

Webpack中的sourcemap

Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换.比如开发环境下用scss写样式, 想在浏览器中在线编辑css那样编辑scss就不是那么容易了.从我自己看过的资料中, sourcemap的概念最早出现在12年, jquer1.9是较早支持sourcemap的库.这篇博客比较有代表性:Introduction to JavaScript Sourc

OSGi与Maven、Eclipse PlugIn的区别

osgi 的框架的 apache felix   equinox osgi的bundle 的概念maven 的  module  的   Eclipse 的 PlugIn  的区别.... OSGi与Maven Maven也具有模块化系统的特征:但是它只是一个编译时工具,而不是运行时框架.Maven并不是OSGi的竞争者,而是OSGi的一个补充. 通过在pom.xml中指定所依赖jar包的名称.版本号,Maven就能在编译时自动下载正确的jar文件,并部署到classpath中. 然而Maven

Webpack中的路径

webpack中涉及许多路径参数的配置.在此做个整理. context context是webpack编译时的基础目录,entry入口会相对于此目录查找. 若不配置,默认值是当前目录,webpack设置context.默认值代码: this.set("context", process.cwd()); 即webpack运行所在目录. context应该是绝对路径,假设入口是src/main.js,则可以设置 { context: path.resolve("./src&quo

在webpack中使用postcss之插件包precss

precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package.json #自动生成package.json文件 npm init 2.新建webpack.config.js module.exports = { entry: "./main.js", output: { path: __dirname, // __dirname是node.js中的

webpack中的hash、chunkhash和contenthash

这三个hash值都是webpack在打包的时候根据内部算法生成的一串字符串,总的来说最大的不同就是其囊括控制的范围大小不同,对应的控制颗粒度不同. hash hash是对webpack整个一次构建而言,在webpack构建中,文件都会带上对应的MD5值,构建生成的文件hash值都是一样的.如果出口是hash,那么一旦针对项目中任何一个文件的修改,都会构建整个项目,重新获取hash值.如果有目的性的缓存就会失败. chunkhash chunkhash的范围可以针对某个模块而言,它会从入口出发,对

webpack中的加载器

通过loader打包非js模块 在实际开发过程中,webpack 默认只能打包处理以.js 后缀名结尾的模块,其他非.js 后缀名结 尾的模块,webpack默认处理不,需要调用loader加载器才可以正常打包,否则会报错! loader加载器可以协助webpack打包处理特定的文件模块,比如: less-loader可以打包处理 .less相关的文件 sass-loader可以打包处理 .scss相关的文件 url-loader可以打包处理css中与url路径相关的文件 loader的调用过程

webpack中的~

比如我们可以看到一些css文件中有这样的代码: @import '~antd/dist/antd.css';... 那么,这个 ~ 起什么作用呢? 首先,我们来看一下URL转换规则 1.如果URL是一个绝对路径(例如 /images/foo.png),它将会保留不变. 2.如果URL以 . 开头,它会作为一个相对模块请求被解析且基于你的文件系统中的目录结构进行解析. 3.如果URL以 ~ 开头,其后任何的内容都会作为一个模块请求被解析.这意味着你甚至可以引用node模块中的资源: <img sr

redis中save和bgsave区别

转自:redis中save和bgsave区别 SAVE 和 BGSAVE 两个命令都会调用 rdbSave 函数,但它们调用的方式各有不同: SAVE 直接调用 rdbSave ,阻塞 Redis 主进程,直到保存完成为止.在主进程阻塞期间,服务器不能处理客户端的任何请求. BGSAVE 则 fork 出一个子进程,子进程负责调用 rdbSave ,并在保存完成之后向主进程发送信号,通知保存已完成. Redis 服务器在BGSAVE 执行期间仍然可以继续处理客户端的请求.

java中ArrayList 、LinkList区别

转自:http://blog.csdn.net/wuchuanpingstone/article/details/6678653 个人建议:以下这篇文章,是从例子说明的方式,解释ArrayList.LinkedList,但是最好的方式还是看源代码.其实ArrayList就是一个动态数组,LinkedList是一个链表.  1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.     2.对于随机访问get和set,ArrayList优于LinkedLis