webpack入门(四)——webpack loader 和plugin
什么是loader
loaders是你用在app源码上的转换元件。他们是用node.js运行的,把源文件作为参数,返回新的资源的函数。
例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX。
loaders 特点:
1. 可以链式拼接。他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给下一个loader。
2. loaders可以是同步的,也可以是异步的。
3. loaders是用node.js来跑,可以做一切可能的事情。
4. loaders接收query参数。这些参数会传入 loaders内部作为配置来用。
5. 在webpack config 中 loaders可以绑定到 扩展名/正则 。
6. loaders 可以用npm 发布或者安装。
7. 除了用package.json 的main导出的 loader外, 一般的模块也可以导出一个loader。
8. 装载机可以访问配置。
9. plugin 可以给loaders更多功能。
10. loader可以发出更多的任意文件。
resoloving loaders
loader 的resolve跟 模块很像。一个loader预期导出一个函数,而且是用兼容javascript的nodepgn 的。一般情况下,用npm管理loader,但是你也可以在自己app内有loader文件。
引用loader
为了方便,虽然不是必须的, loaders一般命名为xxx-loader, xxx就是loader的实义名。例如 json-loader。
或许你已经用全名引用了loader(例如 json-loader),如果没有你可以用它的短名(例如 json)。
装载机命名惯例和优先级搜索顺序由webpack 配置API中的resolveLoader.moduleTemplates 定义。
装载机的命名约定可能在用require
语法引用时会有用。看下面的用法。
安装 loader
如果 npm 上有 这个Loader,你可以像这下面这样安装
$ nppm install xxx-loader --save
- 1
或者
$ npm install xxx-loader --save-dev
- 1
用法
有很多种办法在你的app中用loader:
1. 显示地在 require
中添加。
2. 在配置文件中 配置。
3. 在命令行配置。
在require
中用
注意:如果你不知道你的代码在哪个环境(node.js和browser)中用尽量, 避免使用这个。 使用下一节那样的配置。
在require语句中(或者 define, require.ensure等)你可以指定装载机。只需要用 “!”将资源和Loader分开。每一部分会相对于当前文件夹来resolve。它可能覆盖config 文件中用 “!”规定的全部loader。
require("./loader!./dir/file.txt");
// => uses the file "loader.js" in the current directory to transform // "file.txt" in the folder "dir". require("jade!./template.jade"); // => uses the "jade-loader" (that is installed from npm to "node_modules") // to transform the file "template.jade" // If configuration has some transforms bound to the file, they will still be applied. require("!style!css!less!bootstrap/less/bootstrap.less"); // => the file "bootstrap.less" in the folder "less" in the "bootstrap" // module (that is installed from github to "node_modules") is // transformed by the "less-loader". The result is transformed by the // "css-loader" and then by the "style-loader". // If configuration has some transforms bound to the file, they will not be applied.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
config配置
你可以在config文件中把loader绑定到 一个正则。
{module: {loaders: [{ test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files // Alternative syntax: { test: /\.css$/, loaders: ["style", "css"] }, ] } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
命令行
命令行中,你也可以把Loader绑定到扩展名上。
$ webpack --module-bind jade --module-bind 'css=style!css'
- 1
上面的意思是用jade文件 用“jade-loader”加载,css文件用 “style-loader”和“css-loader”加载。
参数
loader可以传入query字符作为参数(像浏览器中那样),query字符串跟在 Loader后面。例如 url-loader?mimetype=image/png
。
注意:查询字符串的格式是由加载程序决定。请去具体的loader文档中查看。许多加载机可以接收正常的query字符串(例如 ?key=value&key2=value2)
,也可以接收JSON对象(?{“key”:”value”,”key1”:”value1”})。
看以下四种写法。
require("url-loader?mimetype=image/png!./file.png");
- 1
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
- 1
{test: /\.png$/,loader: "url-loader", query: { mimetype: "image/png" } }
- 1
- 2
- 3
- 4
- 5
webpack --module-bind "png=url-loader?mimetype=image/png"
- 1
使用插件
在webpack中通常使用插件添加与 bundles相关的功能。例如 BellOnBundlerErrorPlugin 会在打包进程中给你通知错误消息。
内置插件
直接用配置项的plugins属性。
// webpack should be in the node_modules directory, install if not.
var webpack = require("webpack"); module.exports = { plugins: [ new webpack.ResolverPlugin([ new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ], ["normal", "loader"]) ] };
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
其它插件
如果不是内置插件,在npm 上发布过的插件一般可以通过npm 安装安装,如果没有发布,你要用其它方法了
npm install component-webpack-plugin
- 1
然后像像下面这样使用
var ComponentPlugin = require("component-webpack-plugin");
module.exports = { plugins: [ new ComponentPlugin() ] }
- 1
- 2
- 3
- 4
- 5
- 6
如果你用npm装第三方插件,建议用 webpack-load-plugins .它能检测所有第你安装过并且在保存在package中的三方插件,在你需要用的时候会加载进来。
更多相关文章
webpack入门(一)
webpack入门(二)
webpack入门(三)
webpack入门(四)
webpack入门(五)
webpack入门(六)
去8斗5车,查看更多技术文章。
转载于:https://www.cnblogs.com/ExMan/p/7056007.html
webpack入门(四)——webpack loader 和plugin相关推荐
- Webpack入门——使用Webpack打包Angular项目的一个例子
(一)什么是Webpack Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下 ...
- html5页面文件打包,Webpack入门(四)——HTML打包
到目前为止,有关Webpack最基础的内容差不多已经讲完了,其中包括Webpack运行的基本流程.CSS的打包和图片的打包,也就是说,当你掌握这几节之后,基本上就能像以前不用Webpack时一样愉快地 ...
- webpack入门启动webpack工程
前提: 安装完webpack以及webpack-dev-server 参照: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/830 ...
- webpack基础学习,各个loader和plugin的具体配置
一.邂逅Webpack Webpack是什么 webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序: 打包bundler:webpack可以将帮助我们进行打包,所以它是一个打 ...
- 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 ...
最新文章
- 中科创达孙力:不迷信 AI 算法,智能视觉如何转型升级?
- EF-Net一种适用于双流SOD的有效检测模型(Pattern Recognition)
- cath数据库fasta备注_数据库(同源)搜索软件 FASTA 和 BLAST
- 云南边境“国际新娘”享受国家防艾免费政策
- 如何成为国内敏捷BI领跑者?这家企业的经验值得借鉴
- POJ - 3258 River Hopscotch(二分水题)
- 纯虚函数能为private吗?
- python 爬虫代码_Python 你见过三行代码的爬虫吗
- 一起学习C语言:C语言基本语法(三)
- 学习 MySQL中导入 导出CSV
- java 末级递归树_如何递归获取json里末级章节名称
- jenkins插件更换源_jenkins快速入门,自动构建一个hello world项目(devops,ci/cd)
- 【干货】2021年技术趋势:全球企业加速数字化转型-德勤.pdf(附下载链接)
- Cairngorm 3 libraries 简介 是通过google翻译加上自己的理解得来的
- python 遍历数组gbk编码_python bytes和bytearray、编码和解码
- 分享在工作生活中更好地运用思维导图使用攻略
- 使用 Google Analytics 的网址构建器来监控广告投放
- 嵌入式系统中常用的通信接口技术
- 计算机2进制、4进制、8进制、10进制、16进制、32进制计算规则
- 【BUgStation】RStudio rsession.ese无法找到入口通过更新R解决
热门文章
- 记录一次与大神们的关于GAN应用于NLP的讨论
- 【David Silver强化学习公开课之一】强化学习入门
- mysql与ftp连接过慢的原因
- 卷积层数据放大_卷积神经网络重要回顾
- 简述python的特性_python的一些语言特性(一)
- opencv python教程简书_OpenCV-Python教程:27.图像转换
- java定时器偶尔重复推送_在Java中创建重复的定时器提醒
- 数学之美 系列九 -- 如何确定网页和查询的相关性
- Codeforces 798D Mike and distribution (构造)
- 计算机编程软文,全盲男孩自学编程,一句话打动无数网友…