约定loader一览表
扩展名 | 语义 | loader举例 |
---|---|---|
.js | returns module exports | babel-loader |
.ts | returns module exports | ts-loader |
.coffee | returns module exports | coffee-loader coffee-redux-loader |
.jsx | returns module exports (react component) | jsx-loader react-hot-loader!jsx-loader |
.json .json5 | returns json value | json-loader json5-loader |
.txt | return string value | raw-loader |
.css | returns nothing, side effect of adding style to DOM | style-loader!css-loader style-loader!css-loader!autoprefixer-loader |
.less | returns nothing, side effect of adding style to DOM | style-loader!css-loader!less-loader |
.scss | returns nothing, side effect of adding style to DOM | style-loader!css-loader!scss-loader |
.styl | returns nothing, side effect of adding style to DOM | style-loader!css-loader!stylus-loader |
.png .jpg .jpeg .gif .svg | returns url to image | file-loader url-loader |
.woff .ttf | returns url to font | file-loader url-loader |
.wav .mp3 | returns url to audio | file-loader url-loader |
.mpeg .mp4 .webm .ogv | returns url to video | file-loader |
.html | returns HTML as string | html-loader |
.md .markdown | returns HTML as string | html-loader!markdown-loader |
.jade | returns template function | jade-loader |
.hbs .handlebars | returns template function | handlebars-loader |
loader列表
基本
- json : 把文件加载为JSON。
- hson : 把HanSON 文件(JSON for Humans)加载为JSON对象。
- raw : 把文件加载为纯文本(utf-8)。
- val : 把代码当作模块来执行,并将出口看作是javascript代码。
- to-string : 把代码当作模块来执行,转换输出字符串并将其导出
- imports : 引入东西到模块
- exports : 从模块导出东西。
- expose : 把模块出口暴露给全局上下文。
- script : 在全局上下文执行一个javascript文件(像script标签一样), requires不被解析。
- apply : 执行导出的可带参数的JavaScript函数,输出它的返回值。
- callback : 分析JS,调用指定的函数(你在webpack上下文中执行的)并用结果替换他们 。
- if-loader : 这是预处理程序为webpack模块打捆。它支持if指令,像C语言的 #ifdef。
- source-map : 从模块中提取sourceMappingURL 注释,并把它提供给webpack。
- checksum : 计算文件的校验。
- null : 发出空模块。
- cowsay : 发射一个带cowsay头的模块。
- dsv : 加载csv、tsv文件
- glsl : 加载glsl文件,支持glsl-chunks。
- render-placement : 添加react,为你渲染 组件(大多数情况下不实用)。
- xml : 把一个xml文件加载为JSON。
- svg-react : 把SVG文件加载为JSX文件。React.createClass声名类。
- svg-url : 把SVG文件加载为utf-8编码数据:URI string。
- svg-as-symbol : 把svg源文件根目录下的元素内容包裹在symbol元素里,返回结果标记。
- base64 : 加载文件的内容为base64字符串。
- ng-annotate : 给angular应用的依赖注入编号的Loader。
- node : 加载用node-gyp生成的.node文件。
- required : 加载整个目录树。加载js,css和它们里面的其它东西。
- icons : 从svg文件生成字体。
- block-loader : 基于内容start/end分隔符 ,只重写文件的一部分的通用Loader.
- bundler-configuration : 把配置文件加到打包结果文件中的一个工具。
- console : 在控制台打印解析webpack required的 resolved。
- solc : 编译 Solidity 代码(.sol),返回带有应用程序二进制结口和字节编码的js对象,为部署到Ethereum作准备。
- web3 : 部署Ethereum虚拟机字节码,返回部署智能协议的ready-to-use 的js实例,还返回Web3初始化对象。
打包用
- file 发出文件到输出文件夹。并返回相对路径。
- url url-loader的工作原理跟 file-loader很像。但是如果文件小于一个阈值,它能返回一个Data url 。
- extract 为提取文件准备 HTML和css模块。
- worker 这个loader给预备文件创建一个webworker。
- shared-worker 跟 worker差不多,但是是为 shared worker准备的。
- serviceworker 跟 worker差不多,但是是为 service worker准备的。
未完待续。
从
柯少侠的webpack loader 一览表 博文转载而来