举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > webpackloader和plugin的区别 Webpack Loader

webpackloader和plugin的区别 Webpack Loader

2023-03-20 21:20 Webpack中文指南

webpackloader和plugin的区别 Webpack Loader

webpackloader和plugin的区别

Webpack 是一个模块打包器,它可以将多个模块的代码打包成一个文件,从而减少网络请求数量,加快页面加载速度。Webpack 中有两个重要的概念:loader 和 plugin。

Loader 和 Plugin 都是用来帮助 webpack 处理特定类型的文件。但是它们之间有一些明显的区别。

// Loader 用于对模块的源代码进行转换。它会在 webpack 运行到 require/import 语句时被调用,并将其内容转换成 webpack 能够处理的 JavaScript 模块。
// Plugin 用于在整个构建过程中生效,它可以监听 webpack 打包生命周期中的特定事件,并作出相应动作。Plugin 可以用来处理各种各样的任务,例如打包优化、资源管理、注入环境变量。

总而言之,loader 用于对单个文件进行处理(如将 Sass 文件转译成 CSS 文件);而 plugin 则由 webpack 运行时注入所有文件并根据需要对它们进行处理。

Webpack Loader

Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。

先来看看 loader 有哪些特性?

  • Loader 可以通过管道方式链式调用,每个 loader 可以把资源转换成任意格式并传递给下一个 loader ,但是最后一个 loader 必须返回 JavaScript。
  • Loader 可以同步或异步执行。
  • Loader 运行在 node.js 环境中,所以可以做任何可能的事情。
  • Loader 可以接受参数,以此来传递配置项给 loader。
  • Loader 可以通过文件扩展名(或正则表达式)绑定给不同类型的文件。
  • Loader 可以通过 npm 发布和安装。
  • 除了通过 package.json 的 main 指定,通常的模块也可以导出一个 loader 来使用。
  • Loader 可以访问配置。
  • 插件可以让 loader 拥有更多特性。
  • Loader 可以分发出附加的任意文件。

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块,它通常会返回一个函数。大多数情况下,我们通过 npm 来管理 loader,但是你也可以在项目中自己写 loader 模块。

按照惯例,而非必须,loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader

在引用 loader 的时候可以使用全名 json-loader,或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。

Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

Loader 可以在 require() 引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用。

接上一节的例子,我们要在页面中引入一个 CSS 文件 style.css,首页将 style.css 也看成是一个模块,然后用 css-loader 来读取它,再用 style-loader 把它插入到页面中。


body { background: yellow; }

修改 entry.js:

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

安装 loader:

npm install css-loader style-loader

重新编译打包,刷新页面,就可以看到黄色的页面背景了。

如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。

将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ,然后执行:

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

# 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

显然,这两种使用 loader 的方式,效果是一样的。


阅读全文
以上是名动网为你收集整理的webpackloader和plugin的区别 Webpack Loader全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们