手寫 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