webpack的loader的思想

webpack最后打包出来的是一份JavaScript代码，webpack内部默认也只能够处理JavaScript代码，在打包的时候，会默认把所有遇到的文件当做JavaScript代码进行解析，因此当遇到非JavaScript类型文件时，需要通过loader进行转换。

loader的配置使用：

// webpack.config.js
module.exports = {
    // ...other config
    module: {
        rules: [
            {
                test: /^your-regExp$/,
                use: [
                    {
                        loader: "loader-name-A",
                    },
                    {
                        loader: "loader-name-B"
                    }
                ]
            }
        ]
    }
}

通过配置可以看出，针对每个文件类型，loader是支持以数组形式配置多个的，因此webpack在转换文件类型时，会按顺序链式调用每一个loader，前一个loader返回的内容作为下一个loader的入参。因此loader的开发需要遵循一定的规范，比如返回值必须是标准的js代码字符串，确保loader能够正常工作，同时在开发上需要严格遵循“单一职责”，只关心loader的输出以及对应的输出。

loader函数中的this上下文由webpack提供，可以通过this对象提供的相关属性，获取当前loader所需要的各种信息数据，事实上，这个this指向了一个叫loaderContext的loader-runner特有对象。