webpack loader 一览表

约定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 一览表   博文转载而来