手写 webpack loader

2024-09-02 14:58

文章标签 手写 webpack loader

本文主要是介绍手写 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.jsmodule.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']}]}
}