webpack 深入了解之loader配置详解(一)

一，webpack 中loader作用

	1.从语法角度看，loader是一个普通的Node.js模块，只是必须以函数格式导出来供使用。
		如果有必要可以使用一切Node.js功能模块。
	2.从功能角度看，loader是在Webpack中作用于指定格式的资源文件并将其按照一定格式转换输出
	3.一个Loader只做一件事情，可配置性好。loader支持链式调用。
		上一个loader的处理结果可以传给下一个loader接着处理，上一个Loader的参数options可以传递给下一个loader，直到最后一个loader，返回Webpack所期望的JavaScript。

二，loader配置

1.简单配置
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
        ],
    },
}
loader是配置在module.rules中，module.rules的含义是创建模块的规则，module.rules的值是一个数组，其中每一项都是一项规则。
loader是用来生成符合Webpack的模块的。
然后Webpack把这些模块打包起来生成对应的js文件。loader是在打包前执行的。

1.1配置module.rules的条件

rules.test
在简单的loader配置中，test:/\.css$/，是筛选到名称以.css结尾的文件后，交给user选项里面的loader处理一下。
那么test选项的作用就是筛选资源，符合条件的资源让这项规则中的loader处理。
test的值可以是字符串、正则表达式、函数、数组。

值为字符串时，可以为资源所在目录绝对路径 、资源的绝对路径。

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: path.resolve(__dirname, 'src/css'),
                //test: path.resolve(__dirname, 'src/css/index.css'),
                use: ['style-loader','css-loader']
            },
        ],
    },
}

值为函数时，接收的参数为资源的绝对路径。返回true表示该资源可以交给user选项里面的loader处理一下。

module.exports = {
    module: {
        rules: [
            {
                test: function (path) {
                    return path.indexOf('.css') > -1
                },
                use: ['style-loader','css-loader']
            },
        ],
    },
}

值为数组时，数组每一项可以为字符串、正则表达式、函数，只要符合数组中任一项条件的资源就可以交给user选项里面的loader处理一下。

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: [/\.css$/,path.resolve(__dirname, 'src/css')]
                use: ['style-loader','css-loader']
            },
        ],
    },
}

rules.include
符合条件的资源让这项规则中的loader处理，用法和rules.test一样。

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                include:/\.css$/,
                //include: path.resolve(__dirname, 'src/css'),
                //include: path.resolve(__dirname, 'src/css/index.css'),
                //include: [/\.css$/,path.resolve(__dirname, 'src/css')],
                //include:function (content) {
                    //return content.indexOf('src/css') > -1
                //},
                use: ['style-loader','css-loader']
            },
        ],
    },
}

rules.exclude
符合条件的资源要排除在外，不能让这项规则中的loader处理，用法和rules.test一样。例如排除node_modules中的css文件。

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                exclude:/node_modules/,
                //exclude: path.resolve(__dirname, 'node_modules'),
                //exclude: [/node_modules/ , path.resolve(__dirname, 'node_modules')],
                //exclude:function (content) {
                    //return content.indexOf('node_modules') > -1
                //},
                use: ['style-loader','css-loader']
            },
        ],
    },
}

rules.issuer
用法和rules.test一样，但是要注意是匹配引入资源的文件路径，
如在main.js中引入css/index.css

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                issuer: /\main\.js$/,
                //issuer: path.resolve(__dirname, 'main.js'),
                //issuer: [/\main\.js$/ , path.resolve(__dirname, 'main.js')],
                //issuer:function (content) {
                    //return content.indexOf('main.js') > -1
                //},
                use: ['style-loader', 'css-loader']
            },
        ],
    },
}

rules.issuer 和 rules.test、rules.include 、rules.exclude同时使用时候，也是“与”的关系。

rules.resource

此选项也可筛选资源，符合条件的资源让这项规则中的loader处理。
但配置resource选项后，test、include、exclude选项不能使用。issuer选项不生效。

resource选项中有以下子选项
	test选项，用法和rules.test一样。
	exclude选项，用法和rules.exclude一样。
	include选项，用法和rules.include一样。
	not选项，值为数组，数组每一项可以为字符串、正则表达式、函数，只要符合数组中任一项条件的资源就不能交给user选项里面的loader处理一下。
	and选项，值为数组，数组每一项可以为字符串、正则表达式、函数，必须符合数组中每一项条件的资源才能交给user选项里面的loader处理一下。
	or选项，值为数组，数组每一项可以为字符串、正则表达式、函数，只要符合数组中任一项条件的资源就可以交给user选项里面的loader处理一下。

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                resource:{
                    test:/\.css$/,
                    include: path.resolve(__dirname, 'src/css'),
                    exclude: path.resolve(__dirname, 'node_modules'),
                },
                use: ['style-loader', 'css-loader']
            },
        ],
    },
}

rules.resourceQuery
	匹配资源引入路径上从问号开始的部分。
	
import './ass/main.css?inline'
上面代码中rules.resourceQuery要匹配?inline，
const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                resourceQuery:/inline/,
                // resourceQuery:function (content) {
                    //return content.indexOf('inline') > -1
                // },
                //resourceQuery:[/inline/],
                use: ['style-loader', 'css-loader']
            },
        ],
    },
}

注意
rules.test、rules.include、rules.exclude、rules.issuer、rules.resourceQuery同时使用时候，是“与”的关系，必须同时符合以上所有配置的条件才可以让这项规则中的loader处理。
rules.issuer、rules.resourceQuery、rules.resource同时使用时候，也是“与”的关系。必须同时符合以上所有配置的条件才可以让这项规则中的loader处理。

1.2配置module.rules的lodaer

1.rules.use
	意思是使用哪些loader处理符合条件的资源。
	use: ['style-loader']其实是use: [ { loader: 'style-loader'} ]的简写。
	还可以通过options传入loader，可以理解为loader的选项。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                ]
            },
        ],
    },
}

use的值还可以是函数，返回一个数组，参数为info，info中有以下内容
	compiler：当前webpack的编译器（可以是undefined值）。
	issuer：引入被处理资源的所在文件的绝对路径。
	realResource：被处理资源的绝对路径。
	resource：被处理资源的绝对路径，它常常与realResource替代，只有当资源名称被请求字符串中的!=!覆盖时才不近似。
	resourceQuery：被处理资源的绝对路径中？后面的部分。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: (info) =>{
                    console.log(info)
                    return [
                        'style-loader',
                        {
                            "loader": 'css-loader',
                        },
                    ]
                },
            },
        ],
    },
}

2.rules.loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: 'css-loader',
            },
        ],
    },
}

loader: 'css-loader' 是 use: [ { loader: 'css-loader'} ]的简写。

3.rules.oneOf
当规则匹配时，只使用第一个匹配规则。

例如说要处理css文件资源时，one.css要用url-loader处理，two.css要用file-loader处理。可以用Rule.oneOf来配置，其用法和module.rules一样。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                oneOf: [
                    {
                        resourceQuery: /one/, // one.css?one
                        //test: /one\.css/,
                        use: 'url-loader'
                    },
                    {
                        resourceQuery: /two/, // two.css?two
                        //test: /one\.css/,
                        use: 'file-loader'
                    }
                ]
            },
        ],
    },
}

三，loader的执行顺序

从右到左，从下到上执行。换句话来说，就是后写的先执行，跟栈一样后进先出。

rules: [
    {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
    },
],

以上配置中，less-loader先执行，再执行css-loader，最后执行style-loader。

rules: [
    {
        test: /\.less$/,
        use:[
            {
                loader:'style-loader'
            },
            {
                loader:'css-loader'
            },
            {
                loader:'less-loader'
            }
            
        ]
    },
],

以上配置中，less-loader先执行，再执行css-loader，最后执行style-loader。

rules: [
    {
        test: /\.less$/,
        loader:'style-loader',
    },
    {
        test: /\.less$/,
        loader:'css-loader',
    },
    {
        test:/\.less$/,
        loader:'less-loader'
    }
],

以上配置中，less-loader先执行，再执行css-loader，最后执行style-loader。

可以得知，在同一个规则rules的条件下，其规则rules中的loader都是后写的先执行。从空间上来看，就是从右到左，从下到上执行。