简单webpack plugin 开发

重要是学习下怎么开发webpack plugin，同时记录下

插件模型

webpack 是一个插件，可以是javascript class ，或者具名 class

• 定义apply 方法
• 指定一个绑定到webpack 自身的事件钩子
• 使用webpack提供的plugin api 操作构建结果
  参考格式

class MyExampleWebpackPlugin {
  // 定义 `apply` 方法
  apply(compiler) {
    // 指定要追加的事件钩子函数
    compiler.hooks.compile.tapAsync(
      'afterCompile',
      (compilation, callback) => {
        console.log('This is an example plugin!');
        console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);

        // 使用 webpack 提供的 plugin API 操作构建结果
        compilation.addModule(/* ... */);

        callback();
      }
    );
  }
}

开发一个简单的plugin

项目使用lerna 进行包管理

• 项目结构

├── README.md
├── lerna.json
├── package.json
└── packages
    ├── app
    │ ├── README.md
    │ ├── file.js
    │ ├── lib
    │ │ └── app.js
    │ ├── package.json
    │ └── webpack.config.js
    └── console-webpack
        ├── README.md
        ├── lib
        │ └── console-webpack.js
        └── package.json

• 项目结构说明
  app/lib/app.js

'use strict';

module.exports = app;

function app() {
    return {
        name:"dalongdemoapp",
        version:"firt",
        age:33
    }
}

app/lib/webpack.config.js

const path = require('path');
const console_webpack = require("console-webpack")
module.exports = {
  entry: './lib/app.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 使用插件
    new console_webpack({
      name:"dalong demo plugin",
      version: "v1.0.0"
    })
  ]
};

app/package.json

{
  "name": "app",
  "version": "0.0.0",
  "description": "demo webpack plugin",
  "author": "dalongrong <1141591465@qq.com>",
  "license": "ISC",
  "main": "lib/app.js",
  "directories": {
    "lib": "lib"
  },
  "files": [
    "lib"
  ],
  "publishConfig": {
    "registry": "https://registry.npm.taobao.org"
  },
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "console-webpack":"0.0.0"
  }
}

• 插件代码
  packages/console-webpack/lib/console-webpack.js

class HelloWorldPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.done.tap('HelloWorldPlugin', () => {
      console.log('Hello World!');
      console.log(this.options);
    });
  }
}
module.exports = HelloWorldPlugin;

lerna 项目创建步骤

• 初始化lerna 项目

lerna init

• 创建webpack plugin 插件package

lerna create console-webpack
按照提示操作即可，同时添加插件代码

• 创建app webpack 项目调用plugin

lerna create app
按照提示输入信息

• 添加lerna webpack plugin

cd packages/app
lerna add console-webpack // 会自动查找需要的包

使用插件

注意使用了lerna 自带的run 命令，很方便我们可以直接查找包里面包含需要的npm script

lerna run build // 根目录

说明

插件开发两个比较重要的东西compiler 和 compilation

• compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，
  包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用
  compiler 来访问 webpack 的主环境。

• compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个
  新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以
  及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。

参考资料

https://webpack.docschina.org/contribute/writing-a-plugin/
https://github.com/rongfengliang/webpack-plugin-demo