webpack-loader简析和使用

webpack loader的作用为：在webpack读取文件之后，loader会对匹配到的文件内容进行处理加工，最后给webpack进行下一步编译和构建。当然也可以在loader函数内部做一切node环境支持的事情，例如文件操作，业务逻辑处理等

webpack的loader使用在编译之前，读取文件之后。上图：
以项目为案例：
目录结构如下：

// 构建前的项目目录
loader-test
|-loaders
  |-a.js
  |-b.js
  |-c.js
|-src
  |-index.js
|-node_modules
webpack.config.js
...

webpack.config.js文件：

module.exports = {
    mode:'development',
    module:{
        /**
         * module配置共有以下两个属性：
         * @rules ：所有匹配文件规则的集合数组。rules从索引0开始匹配处理
         * @noParse :不匹配的模块。
         */
        rules:[
            /**
             * 所有rules的元素都包含下面两个属性：
             * @test 正则匹配文件的规则
             * @use 所有loader的数组集合
             */
            {
                test:/\.js$/,//例：匹配js结尾的文件
                use:[
                    /**
                     * @loader loader的路径。也可以在地址拼接参数，例：./loaders/a.js?name=loader-a
                     * @options 传递给loader的参数
                     * 如果在地址在拼接的参数名和options中的参数名重复，会呗options的参数值会覆盖掉
                     */
                    {
                        //loader0
                        loader:'./loaders/a.js?name=loader-a',
                        options:{
                            age:'18',
                            name:'option-a'
                        }
                    },
                    {
                        //loader1
                        loader:'./loaders/b.js?name=loader-b',
                        options:{
                            age:'17',
                            name:'option-b'
                        }
                    },

                ]
            },
            {
                test:/index\.js$/,//例：匹配index.js文件
                use:'./loaders/c.js?name=loader-c' //简写             
            }
        ]

    }

}

index.js文件：

var myPath = 'index'

c.js文件：

module.exports = function(content){
    console.log('loader-c处理')

    console.log('参数',this.query) // ?name=loader-c

    console.log('content',content) //content var myPath = 'index'
    
    return 'c' //返回给下一个loader的内容
}

b.js文件：

module.exports = function(content){
    console.log('loader-b处理')
    /**
     * this.query：地址栏或者options传入的参数：
     */
    console.log('参数',this.query) // { age: '17', name: 'option-b' }
    /**
     * @content
     * 匹配到的文件内容
     */
    console.log('content',content) // 即index.js的代码值：content var myPath = 'index'

    return 'b' //返回给下一个loader的内容
}

a.js文件：

module.exports = function(content){
    console.log('loader-a处理')
    /**
     * this.query：地址栏或者options传入的参数：
     */
    console.log('参数',this.query) //{ age: '18', name: 'option-a' }
    /**
     * @content
     * 上一个loader返回过来的内容
     */
    console.log('content',content) //即b.js返回的内容
    
    return 'a' //返回给下一个loader的内容
}

运行构建命令后，终端输出的结果：

PS D:\myfile\webpack-test\loader-test> npx webpack
loader-c处理
参数 ?name=loader-c
content var myPath = 'index'
loader-b处理
参数 { age: '17', name: 'option-b' }
content c
loader-a处理
参数 { age: '18', name: 'option-a' }
content b

// 构建后的项目目录
loader-test
|-dist
  |-main.js
|-loaders
  |-a.js
  |-b.js
  |-c.js
|-src
  |-index.js
|-node_modules
webpack.config.js

main.js文件：就是a.js返回的内容

loader的执行顺序

1. rules数组按索引从后往前匹配
2. 匹配到的文件use数组索引从后往前的loader处理