一个webpack plugin的奇遇：从一个容器组件说起

嗯，事情是这样的。前段时间新启动的一个紧急项目经过我们小而美的团队不懈的努力，终于顺利上线了。后面review代码的时候发现这样的目录结构：

container
├── Doctor
├── Dss
├── Operator
├── Patient

都是react的容器组件。定睛一看咋这么多。其实还没完呢，其中Doctor，Dss，Operator，Patient这些容器组件几乎没有任何差别，只是里面引入的业务组件不同。试想一下，如果要添加一个新的容器组件，是不是又要复制一份代码然后再修改一下呢？

当然不是，我们有更优雅的解决方案，那就是webpack plugin。

webpack plugin是一个允许你扩展webpack功能的工具。我们可以通过编写一个webpack plugin来实现自动生成容器组件的任务。这样，我们只需要在配置文件中进行简单的配置，就可以自动生成我们需要的容器组件，而不用再手动复制粘贴代码了。

以下是我们编写的webpack plugin的代码：

const fs = require('fs');
const path = require('path');
const createContainerComponent = require('./createContainerComponent');

module.exports = class GenerateContainerComponentsPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('GenerateContainerComponentsPlugin', (compilation, callback) => {
      const containerComponents = ['Doctor', 'Dss', 'Operator', 'Patient'];
      containerComponents.forEach((component) => {
        const componentPath = path.join(__dirname, `./container/${component}.js`);
        const content = createContainerComponent(component);
        fs.writeFileSync(componentPath, content);
      });
      callback();
    });
  }
};

在这个plugin中，我们使用fs和path模块来操作文件系统。createContainerComponent是一个我们自定义的函数，用来生成容器组件的代码。

在webpack配置文件中，我们只需要添加以下配置即可：

plugins: [
  new GenerateContainerComponentsPlugin(),
]

这样，在webpack构建项目的时候，我们的plugin就会自动生成容器组件的代码，并将其输出到指定的目录中。

使用webpack plugin可以帮助我们优化代码，提升开发效率。如果你也在面临类似的问题，不妨尝试一下这个方法。

当然，webpack plugin还有很多其他的用法，比如代码压缩、代码分析、代码热更新等等。在实际开发中，我们可以根据自己的需求选择合适的webpack plugin来使用。