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车,查看更多技术文章。
webpack入门(四)——webpack loader 和plugin的更多相关文章
- Webpack入门——使用Webpack打包Angular项目的一个例子
2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- webpack入门和实战(二):全面理解和运用loader和plugins
您的阅读目录: 一.理解webpack加载器loader 二.理解less-loader加载器的使用 三.理解babel-loader加载器的使用 四.webpack命令行常见使用的操作 五.用web ...
- webpack入门(四)webpack的api 2 module
接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory) 这些选项影响普通的模块 m ...
- webpack 中,loader、plugin 的区别
loader 和 plugin 的主要区别: loader 用于加载某些资源文件. 因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的 ...
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack入门
一,为什么用webpack 1.由于项目中资源的多样性和依赖性 2.js模块规范复杂化 3.开发与线上文件不一致性 二.webpack 特性 1.对CommonJS.AMD.ES6语法兼容 2.对js ...
随机推荐
- 【HackerRank】Pairs
题目链接:Pairs 完全就是Two Sum问题的变形!Two Sum问题是要求数组中和正好等于K的两个数,这个是求数组中两个数的差正好等于K的两个数.总结其实就是“骑驴找马”的问题:即当前遍历ar[ ...
- linux下的cacti安装(centos7)
1 cacti运行环境准备 cacti需要php+apache+mysql+snmp+RRDTool,以及cacti本身.cacti本体是用php开发的网站,通过snmp对远端设备信息进行采集.apa ...
- Docker Compose yml
Wordpress + Mysql version: '3' services: db: image: mysql:latest volumes: - db_data:/var/lib/mysql e ...
- [Android]动态加载/热部署框架汇总
1.DroidPlugin 用途:动态加载 使用案例:360手机助手 GitHub地址:https://github.com/Qihoo360/DroidPlugin ppt介绍:https://gi ...
- juniper ssg 常用命令
netscreen juniper ssg操作命令 2013年4月10日 命令行下取得配置信息 get config 命令行下取得相应时间设置 get clock set vrout ...
- 出现GC overhead limit exceeded 的解决方案
当我在使用MyEclispe IDE创建Maven项目的时候出现 "An internal error occurred during: “Build Project”. GC overh ...
- android.intent.category.LAUNCHER和android.intent.action.MAIN
一个应用程序可以有多个Activity,每个Activity是同级别的,那么在启动程序时,最先启动哪个Activity呢? 有些程序可能需要显示在程序列表里,有些不需要.怎么定义呢? android. ...
- HDFS的设计
当数据集的大小超过一台独立的物理计算机的存储能力时,就有必要对它进行分区(partition)并存储到若干台单独的计算机上.管理网络中跨多台计算机存储的文件系统成为分布式文件系统(distribute ...
- 【转载】Java类加载原理解析
Java类加载原理解析 原文出处:http://www.blogjava.net/zhuxing/archive/2008/08/08/220841.html 1 基本信息 摘要: 每个j ...
- psd文件中截取固定大小的图片
1.选择需要操作的图层 使用选框工具, 设置固定大小和固定大小的值,在图层上拉取选区 2.使用移动工具 使用垂直.水平居中 使选择的icon在选区块中间 3.再选择好块区域调整好位置后 使用截取工具 ...