webpack的loader和plugin为我们提供了强大的功能，下面我们就简单的实现一下webpack-loader，顺便发布到npm，以及使用npm link本地调试我们的模块。

实现loader

这个loader的主要作用就是在打包出来的bundle文件里插入一段自定义信息，上代码

// 新建一个项目
mkdir bundle-author-loader

npm init -y

npm install webpack webpack-cli --save-dev

根目录新建webpack配置文件

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  // 从node_modules以及loaders文件夹下加载loader，方便我们调试
  resolveLoader: {
    modules: ["node_modules", path.resolve(__dirname, "loaders")],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          // 所有的js文件都将加载这个loader，并且有个text的配置项
          {
            loader: "bundle-author-loader",
            options: { text: "/*** author hsky ***/" },
          },
        ],
      },
    ],
  },
};

根目录新建loaders文件夹

// bundle-author-loader.js

// 校验loader传入的options
const { validate } = require("schema-utils");

// loader options的校验规则
// options是一个object类型，有一个text属性，这属性是string类型
const schema = {
  type: "object",
  properties: {
    text: {
      type: "string",
    },
  },
};

module.exports = function (source) {
  // 获取到用户给当前 loader 传入的 options
  // webpack v5 内置了这个方法，之前需要loader-utils这个包
  const options = this.getOptions();
  // 对loader传入的options做校验
  validate(schema, options, "bundle-author-loader");
  // 将我们传入的信息插入到source中
  return `${options.text} ${source}`;
};

然后我们就可以愉快的测试了，新建一个src文件夹

// index.js
const a = 134

在package.json中的script添加"build": "webpack"，跑一下npm run build，此时的项目结构为

bundle-author-loader
|-- dist
|	|-- bundle.js
|-- loaders
|	|-- bundle-author-loader.js
|-- node_modules
|-- src
|	|-- index.js
|-- package-lock.json
|-- package.json
|-- webpackage.config.js

dist文件夹下的bundle.js就是我们打包出来的代码啦，瞅一眼

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
eval("/*** author hsky ***/ const a = 1234;\n\n\n//# sourceURL=webpack://bundle-author-loader/./src/index.js?");
/******/ })()
;

我们可以看到我们在loader中配置的options已经被打包进去了

发布到npm

// 输入账号密码，没有的自行去npm官网注册
npm login

发布前需要整理一下我们的代码，只保留bundle-author-loader.js和package.json，因为loader的默认规则，所以我们把bundle-author-loader.js重命名为index.js并补全一下package.json文件的信息，此时的文件目录结构为：

bundle-author-loader
|-- index.js
|-- package.json

搞好准备工作，我们开始发布

// 输入账号密码，没有的自行去npm官网注册
npm publish

如果出现403，可能的原因：

没有在刚才注册的邮箱验证
使用了淘宝镜像地址

如果出现404，可能需要npm adduser --scope

然后我们就能在npm里看到我们的包了手写，发布并调试webpack-loader

如何调试

我们新建一个项目，安装一下我们刚发布的包

npm install bundle-author-loader --save-dev

和刚才一样配置一下webpack.config.js，因为我们不再需要本地调试，所以也不再需要resolveLoader了

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "bundle-author-loader",
            options: { text: "/*** author hsky ***/" },
          },
        ],
      },
    ],
  },
};

跑一下npm run build，可以看到，我们的配置信息成功的打到了bundle文件里

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
eval("/*** author hsky ***/ const ab = 123456;\n\n\n//# sourceURL=webpack://webpack-loader/./src/index.js?");
/******/ })()
;

如果我们后续对这个loader进行更新维护的话，就需要本地调试，这里提供一种本地调试的方法npm link 我们在bundle-author-loader（即我们发布到npm的项目）中，执行

npm link

手写，发布并调试webpack-loader

我们注意到，npm link会把我们本地的包生成一个全局的软链接，然后进入到另一个项目（即使用bundle-author-loader的包），执行

npm link bundle-author-loader

手写，发布并调试webpack-loader 此时，我们可以发现node_modules下面我们没有安装bundle-author-loader，但是这个包却出现了，这说明我们已经成功建立两个项目的链接，接下来就可以愉快的调试项目了（使用方式和npm install的一样）。比如我们在bundle-author-loader中想添加打包时的时间

// index.js

const { validate } = require("schema-utils");

const schema = {
  type: "object",
  properties: {
    text: {
      type: "string",
    },
  },
};

module.exports = function (source) {
  const options = this.getOptions();
  validate(schema, options, "bundle-author-loader");
  return `${options.text} /**** bundled at ${new Date()} ****/ ${source}`;
};

在测试项目中，直接执行npm run build，此时，打包后文件已经是我们想要调试的内容了

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
eval("/*** author hsky ***/ /**** bundled at Mon Jan 25 2021 20:22:05 GMT+0800 (China Standard Time) ****/ const ab = 123456;\n\n\n//# sourceURL=webpack://webpack-loader/./src/index.js?");
/******/ })()
;

大功告成！！！