Loader转换器

一、简介

webpack本身只能处理js模块，Loader可以理解为模块和资源的转换器，它本身是一个函数，接受文件作为参数，返回转换的结果。因此，我们就能通过require来加载任何类型的模块和文件。

特点：

（1）Loader可以通过管道方式链式调用，每个loader可以自愿转换为任意格式传递给下一个loader，但最后一个loader必须返回js；

（2）同步或异步执行；

（3）运行与node.js环境中

（4）可以通过npm进行安装

（5）可以接受参数，以此来传递配置项给loader；

（6）loader可以通过文件扩展名（或正则表达式）绑定给不通类型的文件

命名规则：按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

二、安装及使用方法

 

::安装

npm install css-loader style-loader   

 

在引用 loader 的时候可以使用全名 json-loader，或者使用短名 json。

使用方法：

（1）在require()引用模块时添加

     例如： 在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

     

//载入style.css

require('!style-loader!css-loader!./style.css');

 

（2）在webpack全局配置中绑定

     详见常用loader介绍。

 

（3）通过命令行的方式使用

     在引入时直接使用：

 

require('./style.css');

 

在打包执行时：

 

webpack entry.js build.js --module-bind 'css=style-loader!css-loader'

::有些环境下可能需要使用双引号

webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

 

三、常用loader

 

css-loader 处理css中路径引用等问题

style-loader 动态把样式写入css

sass-loader scss编译器

less-loader less编译器

postcss-loader scss再处理

 

1、js处理

 

{

    test: /\.js?$/,

    exclude: /node_modules/,

    loader: 'babel',

    query: {

        presets: ['es2015', 'stage-2', 'react']

    }

}

 

（1）babel-loader  转码器

Babel是一个转码器，可以将ES6语法转换为ES5语法，这样就可以用ES6编写程序，而不用担心现有环境是否支持。

例如：

 

//转码前

arr.map(item => item + 1);  //箭头函数

//转码后

arr.map(function(item){

     return item + 1;

});

第一步：Babel的配置文件 .babelrc，存放到项目的更目录下。

所有Babel工具和模块的使用，都必须先写好.babelrc。

 

{

     'presets':[

          'es2015',

          'react',

          'stage-2'

     ],

     'plugins':[]

}

 

①presets字段设定转码规则，官方提过一下的规则集，可根据需要安装。

 

::ES2015转码规则

npm install --save-dev babel-preset-es2015

::react转码规则

npm install --save-dev babel-preset-react

::ES7不同阶段语法提案的转码规则（共有四个阶段），选装一个

npm install --save-dev babel-preset-stage-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

 

②plugins字段是babel插件。

例如:Ant Design 中需要按需加载antd脚本和样式

 

npm install --save-dev antd babel-plugin-import

 

{

     "plugins": [

          ["import", { libraryName: "antd", style: true }]

     ]

}

 

第二步：babel-core

有的代码需要调用Babel的API进行转码，就要使用babel-core模块。

 

npm install babel-core --save-dev

 

更多Babel资料，请查阅大神日志：http://www.ruanyifeng.com/blog/2016/01/babel.html

（2）jsx-loader  jsx编译器

 

npm install --save-dev jsx-loader

 

2、css/sass/less 处理

 

npm install --save-dev css-loader style-loader sass-loader less-loader

 

{

    test: /\.css$/,

    loader: "style-loader!css-loader"

},

{

    test: /\.scss$/,

    loader: "style-loader!css-loader!sass-loader"

},

{

    test: /\.less$/,

    loader: "style-loader!css-loader!less-loader"

},

 

3、文件处理

 

npm install --save-dev url-loader file-loader

 

{

    test: /\.(jpg|png)$/,

    loader: "url-loader?limit=8192"

},

{

    test: /\.svg$/,

    loader: 'url-loader?limit=100000'

},

 

{

      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,

      loader: 'file-loader'

},

 

4、json处理

 

npm install --save-dev json-loader

 

{

     test:/\.json$/,

     loader:'json-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
.style	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