手动实现Webpack Plugin

Webpack 是一个流行的模块打包工具，主要用于 JavaScript 应用程序的构建与打包。其核心功能是将项目中各种模块（JavaScript 文件、CSS、图片等）打包成一个或多个输出文件，从而提高页面加载的性能和组织代码的结构。

Webpack 的主要特点

模块化： Webpack 支持多种模块规范（如 CommonJS、AMD 和 ES6 模块），允许开发者以模块的形式组织代码。
插件系统： Webpack 提供了一个强大的插件系统，可以通过插件来扩展其功能，处理各种任务，如文件压缩、模块热替换等。
负载优化： Webpack 提供代码分割功能，帮助开发者按需加载模块，从而优化加载速度。
热更新：支持热模块替换（HMR），可以在应用运行时更新模块而无需重新加载整个页面，提高开发效率。
配置灵活性： Webpack 的配置文件是一个 Node.js 模块，允许通过 JavaScript 代码编写复杂的配置逻辑。

下面是一个简单的 Webpack 插件示例，演示了如何手写一个自定义的 Webpack 插件。这个插件将在每次构建时输出一条日志消息，显示当前构建的时间。

创建自定义 Webpack 插件

创建一个新的文件，比如 MyPlugin.js，并添加以下代码：

js 复制代码

class MyPlugin {
    apply(compiler) {
      compiler.hooks.compile.tap('MyPlugin', (params) => {
        console.log('开始编译...');
      });
      // 在编译完成时注册一个钩子
      compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
        // 获取当前时间
        const date = new Date();
        console.log(`构建完成于: ${date.toLocaleString()}`);
        callback();
      });
    }
  }
  module.exports = MyPlugin;

2. 在 Webpack 配置中使用插件

在你的 Webpack 配置文件( webpack.config.js )中，引入并使用这个插件：

js 复制代码

const path = require('path');
const MyPlugin = require('./MyPlugin');

module.exports = {
  // 指定 Webpack 打包的入口文件
  entry: './src/index.js',
  // 输出配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    // 使用自定义插件
    new MyPlugin(), 
  ],
  // 设置为开发模式
  mode: 'development', 
};

3. 测试插件

运行 Webpack 构建命令：npx webpack

可以看到控制台打印出来我们的输出，并在文件中生成打包的dist文件。