webpack loaders整合

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组件；

2  babel-loader