手写 webpack loader

webpack loader (webpack 加载器)
webpack => web pack
1)转换ES6语法成ES5
2)处理模块加载依赖
3)生成一个可以在浏览器加载执行的 js 文件

loader （引用定义）
1、是 webpack 用于在编译过程中解析各类文件格式，并输出；
2、本质上就是一个 node 模块，通过写一个函数来完成自动化的过程；
3、由此我们就可以在开发模式下，通过解析各类前端无法解析的文件格式，然后将其解析后返回为对象或字符串供前端开发时使用，在 webpack 的编译过程中自动会将我们前端项目中引用的文件格式对应到指定 loader 解析后输出。

webpack config

module.exports = {
	entry:'./example/index.js',
	output:'./dist/index.js'
}
//包含loader
module.exports = {
	entry:'./example/index.js',
	output:'./dist/index.js',
	plugin:[],
	module:{
		rules:[
			{
				test:/\.txt/,
		use:[
		{
		'../../loaders/test1.js',
		}
		]
	}
]
}
}

多个loader
use:[
{
'../loader/change-content.js',
'../loader/uppercase-loader.js',
'../loader/reverse-loader.js',
}
]

//tips：如果use.length > 1 ,执行顺序为从下往上（先进后出）


//reverse-loader.js
module.exports = function (source) {
    if(source) {
        source = source.split('').reverse().join('')
    }
    return source
}

//uppercase-loader.js

module.exports = function (source) {
    console.log('test',source)
    if (source) {
        source = source.charAt(0).toUpperCase() + source.slice(1)
        console.log( source)
    }
    return source
}

//webpack.config.js
module.exports = {
    entry:path.join(__dirname,'./src/txt/test.txt'),
    output:{
        path:path.join(__dirname,"test"),
        filename: 'temp.js'
    },
    module:{
        rules:[
            {
                test:/\.txt/,
                use:[
                    './loader/reverse-loader'
                ]
            }
        ]
    }
}

示例demo:https://github.com/yzbyxmx/webpack.git