1 loaders简介
webpack支持使用loader对文件进行预处理。
1.文件
val-loader将代码作为模块执行,并将其导出为js代码;
ref-loader用于手动建立文件之间的依赖关系;
1.JSON
cson-loader加载并转换CSON文件;
3.语法转换
babel-loader:使用babel加载es5+代码转换为es5;
buble-loader:使用buble加载es5+代码转换为es5;
traceur-loader:使用traceur加载es5+代码转换为es5;
ts-loader:像加载js一样加载ts2.0+;
coffee-loader:像加载js一样加载coffeeScript;
fengari-loader:使用fengari加载lua代码;
elm-webpack-loader:像加载js一样加载Elm;
4.模板
html-loader:将html导出为字符串,需要传入静态资源引用路径;
pug-loader:加载pug和jade模板并返回一个函数;
markdown-loader:将markdown编译为html;
react-markdown-loader:使用markdown-parse解析器将markdown编译为React组件;
posthtml-loader:使用posthtml加载并转换为html文件;
handlebars-loader:将handlebars文件编译为html;
markup-inline-loader:将svg/mathML文件嵌套到html中;
twing-loader:编译twig模板并返回一个函数;
remark-loader:通过remark加载markdown,且支持解析内容中的图片;
5.样式
style-loader:将模块导出的内容作为样式并添加到dom中;
css-loader:加载css文件并解析import的css文件,最终返回css代码;
less-loader:加载并编译less文件;
sass-loader:加载并编译sass/scss文件;
postcss-loader:使用postcss加载并转换css/sss文件;
stylus-loader:加载并编译stylus文件;
6.框架
vue-loader:加载并编译vue组件;
angular2-template-loader:加载并编译angular组件;