webpack练习之手写loader

手写一个style-loader来把样式文件插入head里面，准备工作 vue + webpack就自己弄了，webpack的一些配置也自己配置好

一、创建index.css文件

.box{width: 100px;height: 100px;background-color: red;
}

然后在vue的main.js文件中引入它

二、创建自定义loader文件

module.exports = function (content) {let str = `var style = document.createElement("style");style.innerHTML = ${JSON.stringify(content)};document.head.appendChild(style);`;return str;
};

webpack里面的loader配置

{test: /\.css$/,use: [resolve(__dirname, "../loader/testSytleLoader.js")],
},

在APP.vue文件里面使用

<template><div class="box"></div><router-view />
</template>

这个时候就会在页面看到效果了
在这里插入图片描述

三、升级优化

如果在样式文件中使用了背景图片，样式就会失败
在这里插入图片描述
原因就是在于背景图片的路径没有进行处理，浏览器找不到这个资源，因此我们还要处理背景图片，要是感兴趣可以自己去手写loader来处理，这里就直接使用css-loader来处理了，我们只需要处理css-loader处理好的内容
webpack的loader配置更改为

 {test: /\.css$/,use: [resolve(__dirname, "../loader/testSytleLoader.js"),"css-loader"],
},

这个时候，页面就变成这样了
在这里插入图片描述
css-loader处理之后的内容变成了js代码，所以需要对这个js代码进行处理
我们这里使用pitch函数来进行处理，如果不知道啥事pitch函数，看上一篇文章
优化后的loader

module.exports = function (content) {};
module.exports.pitch = function (remainingRequest) {// 要注意我使用的是箭头函数还是普通函数，这样才能保住this指向的正确性// remainingRequest  剩余还有哪些loader要来处理这个文件，也就是当前loader后面的所有loaderconsole.log(remainingRequest);//打印结果： C:\项目\webpack-study\node_modules\css-loader\dist\cjs.js!C:\项目\webpack-study\src\assets\index.css// 结果表明后续还有css-loader来处理这个index.css文件，使用的!来分割// 因为后面需要使用相对路径，所以需要使用this.utils.contextify来获取相对路径let absolutePath = remainingRequest.split("!").map((path) => {return this.utils.contextify(this.context, path);}).join("!");console.log(absolutePath); //../../node_modules/css-loader/dist/cjs.js!./index.csslet str = `/*** 这里相当于使用的内联loader,来获取css-loader处理好的内容，这里只能使用相对路径，所以才会有上面的处理，加!!防止继续执行css-loader的普通函数*/import style from "!!${absolutePath}"  const styleEl = document.createElement("style");styleEl.innerHTML = style;document.head.appendChild(styleEl);`;return str;   //有了return，也不会执行css-loader了
};