江苏龙网

  1. 首页 > 人文 > >

惠普|webpack如何编写一个自己的loader

惠普|webpack如何编写一个自己的loader

文章图片



Loader是什么？
Loader 只是一个导出为函数的 JavaScript 模块 。 现在我们可以知道其实loader就是一个函数 ， 我们可以在这个函数里做一些事情 。 谁会调用这个函数呢（loader runner 会调用这个函数 ， 然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去 。 ）
Loader职责是什么？
Loader职责是单一的 ， 只做一件事 。假设一个源文件需要多步转换才能正常使用 ， 就只能通过多个Loader去转换了 。 拿到最初的资源文件内容 ， 转换成我们想要的结果 ， 最后输出来
多个Loader执行会有什么情况？
在调用多个Loader去转换一个文件时 ，第一个Loader将会拿到需处理的原内容 ， 上一个Loader处理后的结果会传给下一个接着处理 ， 最后的Loader将处理后的最终结果返回给Webpack ， 但是这里有个重要的多loader执行顺序是从右到左的（case: use:['style-loader' css-loader
先回执行css-loader再执行style-loader）
如何创建Loader呢？
创建loader其实就是创建一个函数 ， 这里咱们初的创建一下叫做delconsole-loader第一步在根目录创建一个loaders文件夹在他的下面咱们创建一个delconsole-loader.js文件
// delconsole-loader.js
// 由于nodejs是遵从commonjs规范的所以你懂的导出格式
module.exports = function(context) {
//context是被处理文件里面的内容
// 调皮操作在项目内容里添加上自己的名字
context += '\\/**my name is tiaopi*\\/' + context;
// 替换内容
context = context.replace(/console\\.log\\(.*\\)/g '');
// 返回想要的结果
return context;

使用咱们的自己的delconsole-loader
module.exports = {
module: {
rules: [
{
test: /\\./
use: ['./delconsole-loader'





;
index.js文件
// index.js内容
console.log('start')
function a() {
return 'this is test del console'

a();
console.log('end')
执行webpack命令看到一下结果是不是前后没console啊

【惠普|webpack如何编写一个自己的loader】了解自己构建loader相关知识记得?关注啊；后面会继续介绍loader相关高级操作


    推荐阅读


    上一篇：浙江卫视|浙江卫视忽悠肖战，东方卫视北京卫视却都力挺，代言广告成功上星

    下一篇：抖音|抖音内测带货小时榜，会成为电商流量新入口吗？