webpack loader 编写

如何编写一个自己的 loader

需求：将 css 中的 bgcolor 替换为 background-color

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

HelloLoader.pitch = function (remainingRequest, precedingRequest, data) {
  console.log("*** remainingRequest ***", remainingRequest);
  data.name = "HelloLoader";
};

module.exports = HelloLoader;

// webpack.config.js
module.exports = {
  // ... other config
  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",
      },
    ],
  },
};

/* src/style.css */
bgcolor: red;

npm run build

执行之后在对应的 bundle.js 中查查看效果。