webpack - loader 学习记录（二）

以下是参加 千锋的《前端架构进阶实战训练营》 中学习到的知识点。
摘录了一些暂时还无法用自己的话描述的定义性知识与常规配置示例。
知识点没有全部记录在案，只记录个人真正吸收的知识，如有需要可联系我代为推荐。

一、创建一个loader

千言万语不如自己实践，首先创建一个js，用于被webpack引入为loader。

function HelloLoader(content) {
  console.log("***content", content);
  console.log("***data.name", this.data.name);
  // bgColor -> background-color
  content = content.replace(/bgColor/g, "background-color");
  return content;
}

HelloLoader.pitch = function (request, prequerest, data) {
  console.log("***hello pitch -> request", request);
  data.name = "hello pitch";
};

module.exports = HelloLoader;

以上 HelloLoader 为一个回调函数，webpack 执行 loader 执行到这里时会调用这个方法，将信息传入其中。我们可以在 HelloLoader 中获取到上下文，并实现自己的loader方法。
其中pitch需要多注意，如果返回的值不是undefined，会产生熔断反应(即：吃完饭就掀桌子，后面的loader将不被执行)

二、配置webpack.config.js

const path = require("path");
const webpack = require("webpack");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolveLoader: {
    alias: {
      "hello-loader": path.resolve(__dirname, "./loaders/HelloLoader.js"),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.css$/i,
        use: ["hello-loader"],
        enforce: "pre",
      },
    ],
  },
};

我们可以通过webpack.config.jso里配置我们希望项目执行的loader，但是要注意传入当前__dirname,毕竟传入后相对位置及信息就会有误。
这里使用了path.resolve(__dirname,“./loaders/HelloLoader.js”)，在上方resolveLoader、alias注册方法后，还需要在module.rules内配置的规划整理。