webpack ------ loaders

1.属性说明

module:{
    loaders:[
        {
            test:/.\css$/,    //文件名正则表达式
            loaders:['style','css'],    //使用的loader，若多余一个，则用数组包含，并从右至左的顺序执行
            include:    //包含的路径，也就是只处理这个路径内的文件
            exclude:    //不包含的路径，这个路径中的文件将忽略，不实用这个loader
        }，
        ...
    ]
}

2.css类

2.1css-loader

css-loader会遍历css文件，找到所有的url(…)并且处理

2.2style-loader

style-loader会把所有的样式插入到页面的一个style标签中

2.3使用

一般以上两个配合使用，先执行css-loader，再执行style-loader

module:{
    loaders:[
        {
            test:/\.css$/,
            loader:'style!css',    //多个loader用'!'隔开
        }
    ]
}

Tip:
- loader属性： 看到有文章写多个一个类型文件多个loader时，loader属性使用了数组[‘loader1’,’loader2’]，尝试后发现报错，改为’loader1!loader2’后可以使用。这里需要查阅资料是否可以写成数组的形式

3.sass

3.1sass-loader

3.2node-loader

3.3使用

module:{
    loaders:[
        {
            test:/\.scss$/,
            loader:'style!css!sass',    //多个loader用'!'隔开
        }
    ]
}

启用css的source-map

module:{
    loaders:[
        {
            test:/\.scss$/,
            loader:'style!css?sourceMap!sass?sourceMap',    //多个loader用'!'隔开
        }
    ]
}

4.图片

4.1file-loader

4.2url-loader

4.3使用

module:{
    loaders:[
        {
            test: /\.(png|jpg)$/,
            loader: 'url?limit=40000'    //单位是b，这里就是40k
        },
    ]
}

参数：
- limit： 占用内存大小小鱼这个限值，则将图片转为base64。