loader配置

当一种文件中需要使用多个loader时，使用 ！来连接多个loader。如下CSS-loader中所示。

babel-loader常用配置：

​module: { 
​   loaders: [
​       {
            ​test: /\.jsx?$/,
            ​exclude: /node_modules/,
            ​loader: 'babel-loader',
            ​query: 
            ​{
            ​presets: ['es2015', 'react']
            ​}
        ​}
    ​]
​}

presets字段设定转码规则，也可以用这种方式定义：

loader: 'babel-loader?presets[]=es2015&presets[]=react'

也可以额外定义一个.babelrc文件对babel文件进行配置。若有.babelrc文件，则module中无需配置query。.babelrc配置如下：

{
    "presets": ["es2015", "react"]
}

CSS-loader配置：

module: {
    loaders:[
        { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
​}

将 CSS 文件用module的方式引入，在css-loader后面加上参数modules即可。这时就可以使用moduleName.className的方式对CSS文件中的样式进行访问。

module: {
    loaders:[
        { test: /\.css$/, loader: 'style-loader!css-loader?modules' },
    ]
​}

CSS文件示例：（.h2被定义成了全局样式，所以可以在任何地方使用）

.h1 {
    color:red;
}
:global(.h2) {
    color: blue;
}

main.jsx文件示例：

var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');
ReactDOM.render(
    

        
Hello World
        
"h2">Hello Webpack
    
,
    document.getElementById('example')
);

Image loader配置：

module: {
    loaders:[
        { 
            test: /\.(png|jpg)$/, 
            loader: 'url-loader?limit=8192' 
        }
    ]
}

注意：？ 后面是参数，本例中，小于8K的图片将会采用Data URL,大于8K的图片将采用普通URL。