写一个webpack loader首先需要去创建一个webpack项目构建文件目录 index.html index

首先需要去创建一个webpack项目

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

构建文件目录

webpack-demo
  |- package.json
+ |-dist
  + |- index.html
+ |- /src
+   |- index.js
+ |-webpack.config.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

index.js

document.write("hello world");
console.log("执行js");

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: "./dist",
    overlay: {
      warnings: true,
      errors: true,
    },
    open: true,
  }
};

下面开发一个简单的loader: 在 src下新建 myLoader/my-loader.js

module.exports = function (source) {
  // 在这里按照你的需求处理 source
  console.log("source==========", source, "===========");
  // 获取配置项
  console.log(this.query);
  //替换world为webpack
  return source.replace("world", "webpack");
};

修改webpack.config.js,添加module和rule

rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve("./src/myLoader/my-loader.js"),
            options: {
              aa: 1,
            },
          },
        ],
      }
      ]

使用npx webpack去打包生成dist/bundle.js. index.html已经通过script标签引用bundle.js 在浏览器打开index.html 可以看到能够展示我们修改的内容

总结:

可以将Loader视为在Webpack构建过程中对原始代码进行拦截和处理的中间件。Loader在模块加载阶段被调用，可以修改模块的源代码、转换文件格式、执行静态分析、应用代码检查等操作。

当Webpack加载模块时，它会根据文件类型匹配相应的Loader，并将模块的源代码传递给Loader进行处理。Loader可以对源代码进行转换、解析、处理和修改，然后返回处理后的代码供Webpack继续处理。

这种拦截和处理的机制使得Webpack具有了很大的灵活性和可扩展性。通过使用不同的Loader，开发者可以根据项目需求对不同类型的文件进行定制化的处理。Loader的拦截和处理能力是Webpack实现一切资源模块化的基础。

附上官网关于loader链接:

编写 loader | webpack 中文文档 (docschina.org)

一个简单的 raw-loader 帮助大家理解 loader的编写流程,个人认为是一个很好的示例:

raw-loader/src/index.js at master · webpack-contrib/raw-loader (github.com)

如果不使用raw-loader 进行如下操作

import txt from "./1.txt";
console.log(txt);
document.write(txt);

会发生报错