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后面的所有loader
  console.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.css

  let 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了
};