课时-23.md

课时 23：编写插件

webpack-box 励志做一个人人均可收益的项目，但是想要完成一个大型项目往往需要很多的个性化配置，所以 webpack-box 做了可插拔式设计，提供了插件系统。

插件会自动检查项目 package.json 文件内的依赖是否符合插件规则，如果符合的话就会认为此依赖为插件，webpack-box 会自动查找并组装对应配置。

插件名规则

const isPligunReg = /^(@pkb\/|pk-|@[\w-]+(\.)?[\w-]+\/pk-)(cli-)?plugin-/;

目录

插件是 npm 包的形式添加的

└── packages                     # 内建官方插件编写目录
   │── command.config.js         # 命令行的编写
   │── webpack-chain.config.js   # webpack-chain 配置编写
   │── prompt.config.js          # prompt 配置 (待补充)
   └── generator                 # 生成插件相关配置（待补充）
      │── template               # 模版
      └── index.js

注册命令行

command.config.js

• injectCommand 提供了注册 command 的方法
• program 是 commander 对象
• cleanArgs 整理参数方法
• boxConfig 项目配置

module.exports = function({ injectCommand }) {
  injectCommand(function({ program, cleanArgs, boxConfig }) {
    program
      .command("build [app-page]")
      .description("构建生产环境")
      .option("-r, --report", "打包分析报告")
      .option("-d, --dll", "合并差分包")
      .action(async (name, cmd) => {
        const options = cleanArgs(cmd);
        const args = Object.assign(options, { name }, boxConfig);
        require("../build/build")(args);
      });
  });
};

配置 webpack

webpack-chain.config.js

• config webpack-chain 配置
• webpackVersion 当前使用的 webpack 版本
• resolve 获取工程目录下的文件路径
• options 项目配置及参数

// [基础配置]
module.exports = ({ config, webpackVersion, resolve, options }) => {
  return () => {};
};

生成配置模板

generator/index

module.exports = (api, options, rootOptions) => {
  // 修改 `package.json` 里的字段
  api.extendPackage({
    scripts: {
      test: "wb-service test"
    }
  });

  // 复制并用 ejs 渲染 `./template` 内所有的文件
  api.render("./template");

  if (options.foo) {
    // 有条件地生成文件
  }
};