webpack入门(四)——webpack loader 和plugin

发布时间:2017-7-1 11:39:36编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"webpack入门(四)——webpack loader 和plugin ",主要涉及到webpack入门(四)——webpack loader 和plugin 方面的内容,对于webpack入门(四)——webpack loader 和plugin 感兴趣的同学可以参考一下。

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.


    上一篇:angularJS1笔记-(20)-模块化加载机制seajs
    下一篇:CardView的具体使用方法(转)

    相关文章

    相关评论

    本站评论功能暂时取消,后续此功能例行通知。

    一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

    二、互相尊重,对自己的言论和行为负责。

    好贷网好贷款