加载器其实就是应用于你的程序的资源文件的转换器。它们将资源文件作为参数传入,然后返回新的资源。
例如,你可以使用加载器告诉webpack加载CoffeeScript文件或者JSX文件。
加载器特点:
- 加载器可以链式调用,它们被应用于资源管道内。最后一个加载器产出JavaScript,其他的加载器则返回指定的格式(被传入下一个加载器)。
- 加载器可以是同步的也可以是异步的。
- 加载器运行在node.js中,可以做任何可能的事情。
- 加载器接受查询参数,并用于配置加载器特性。
- 加载器可以和配置中的扩展、正则绑定。
- 加载器可以通过npm发布和安装。
- 普通模块可以导出加载器,除了通过packag.json加载器加载的普通主模块。
- 加载器可以被配置。
- 插件可以给加载器添加更多新特性。
- 加载器可以产出额外的任意文件。
- 。。。。。
详解加载器
加载器都都是一些相似的模块。使用node.js兼容JavaScript的方式编写,并导出方法。通常情况下,你使用npm管理加载器,然而你也可以将加载器以文件的形式引入你的应用中。
引用加载器
- 按照惯例(虽然不是必须的),加载器通常以XXX-loader的形式命名,XXX代表上下文名称。例如:josn-loader
- 你可以使用全名引用加载器(例如:json-loader),也可以使用缩写名(例如:json)
- 加载器的命名规则和优先级搜索顺序由WebPack配置API中的resolveLoader.moduleTemplates定义。
- 加载器的命名规则是很有用的,特别是在使用require()声明引用加载器时。详见下面的使用规则
安装加载器
如果加载器是发不到npm上的,你可以通过下面的方式安装:
$ npm install xxx-loader --save
或者
$ npm install xxx-loader --save-dev
使用加载器
这里有很多种方式使用加载器:
- 直接使用require声明
备注:如果你希望你的代码和环境无关,请尽量不要使用这种方式。而应该使用配置文件配置加载器。
可以使用require声明(或者define,require.ensure,等等)定义加载器。使用'!'分隔加载器,每一个部分都相对于当前文件夹解析。
例如:
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" 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".
- 通过配置文件配置
你可以通过配置文件将加载器和正则绑定:
{ 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"] }, ] } }
- 通过命令行配置
你可以通过命令行将加载器和指定扩展后缀绑定:
$ webpack --module-bind jade --module-bind 'css=style!css'
上面的命令设置使用“jade”加载器加载“.jade”文件,使用“style”和“css”加载器加载“.css”文件。
查询参数
加载器可以通过查询字符串(就像web中一样)传递查询参数。查询字符串被添加在“?”后,例如:url-loader?mimetype=image/png
备注:查询字符串的格式取决于加载器本身。具体格式请参考对应的加载器文档。大多数加载器都使用通常的查询格式(?key=value&key2=value2)和JSON对象格式(?{"key":"value","key2":"value2"})
- 在require中
require("url-loader?mimetype=image/png!./file.png");
- 在配置文件中
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
或者
{ test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png" } }
- 在命令行中
webpack --module-bind "png=url-loader?mimetype=image/png"
相关推荐
webpack-proxy:使用具有自动依赖项安装的webpack加载器
Strip Loader 是 Webpack 加载器,它能剥离你产品代码里的任意一个函数。示例代码:var debug = require('debug')('MyFile'); var makeFoo = function () { // The following two lines of code ...
Webpack加载器使用Comlink无缝地将模块卸载到工作线程
Webpack加载器将react-hot-loader自动插入到您的App中
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个...webpack中常用的加载器 css-loader 处理css中路径引用等问题 用于在js中加载css,解释@
一个没有框架的简单webpack启动器(如Vue,React,Angular等)
提供webpack加载器配置的最佳实践
一个webpack加载器,将SVG图标变成可直接导入的vuejs组件
用于GLSL着色器的Webpack加载器 用于webpack的glsl着色器加载器,包括对嵌套导入的支持,从而允许在更复杂的着色器实现中智能地重用代码。 着色器以字符串形式返回。 安装 npm install --save-dev webpack-glsl-...
Webpack Starter回购对于任何带有我想要的主要加载器/插件的新webpack项目,这都是一个入门。 该启动器附带以下内容: 萨斯React(包括Babel) Webpack开发服务器HtmlWebpackPlugin(用于更改/src index.html文件) ...
webpack启动器
将SVG导入为React / Vue组件的Webpack加载器
主要介绍了webpack模块加载器兼打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Webpack GLTF加载器2 用于.gltf文件的webpack加载器应自动捆绑所有引用的文件。 基于( 的作品,但几乎从零开始重写。 这是他的原始加载器,在我尝试时对我不起作用,因此我决定重写它。 (截至2018年10月5日,它也...
插件和加载器以优化(压缩)使用的所有图像 。 不用担心图像的大小,现在它们总是经过优化/压缩的。 image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先,您需要安装image-minimizer-webpack-plugin ...
"file-loader"或其他能够处理图像文件的加载器应放置在此加载器之前(因为webpack加载器从最后一个运行到第一个)。 如果您只想旋转一些但不是全部图像,请使用webpack的oneOf (如)。webpack.config.js module . ...
用于.graphql查询文档的Webpack加载器,具有对模式验证和片段定义的一流支持。 graphql-loader可与 , 以及任何您想在前端提供GraphQL查询文档的地方配合使用。 安装 yarn add --dev webpack-graphql-loader # or ...
要使用worker-loader将Web Worker加载到NextJS站点上,并允许在其worker上运行babel等webpack加载器,必须覆盖构建输出路径。 感谢。 // next.config.jsmodule . exports = { webpack ( config , options ) { ...
替换加载器 在加载程序加载的内容中执行替换(普通和正则表达式)。 安装: $ yarn add --dev string-replace-loader 在2.0.0版中,预计该加载程序将在Node v4 +环境中使用。 不再支持Node v3和更低版本,但是您...
One Loader一个webpack加载器来启用单个文件的React组件