自定义webpack-plugin

[conan1992]

插件相关

• compiler
  对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
• compilation
  此对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用

准备工作

mkdir custom-webpack-plugin && cd custom-webpack-plugin
npm init -y
cnpm i webpack webpack-cli clean-webpack-plugin html-webpack-plugin --save-dev
touch webpack.config.js
mkdir src && cd src
touch index.js

src/index.js

console.log("here is index.js")

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'custom-plugin'
    }),
    new CleanWebpackPlugin()
  ]
}

no1-webpack-plugin

新建plugin/no1-webpack-plugin.js

 webpack-custom-plugin
  |- package.json
  |- webpack.config.js
  |- /src
    |- index.js
+ |- /plugins
+   |-no1-webpack-plugin.js

plugins/no1-webpack-plugin.js

class No1WebpackPlugin{
    constructor(options){
        this.options = options
    }
    apply(compiler){
        compiler.hooks.emit.tapAsync("myPlugin",(A,B)=>{
            console.log(this.options.msg, B)
            B()
        })
    }
}
module.exports = No1WebpackPlugin;

在对应位置修改webpack.config.js

+ const No1WebpackPlugin = require('./plugins/no1-webpack-plugin');

+   new No1WebpackPlugin({ msg: 'bad girl~' })

file-list-webpack-plugin

const { option } = require("yargs");

class FileListWebpackPlugin{
    constructor(options){
        this.options = options || {};
        this.filename = this.options.filename || "fileList.md"
    }
    apply(compiler){
        // compiler.hooks.emit.tapAsync("FileListWebpackPlugin",(compilation, callback)=>{
        //     const FileName = this.filename;
        //     let len = Object.keys(compilation.assets).length;
        //     let content = Object.keys(compilation.assets).reduce((acc, filename)=>{
        //         return acc + `- ${filename}\n`
        //     }, `# 一共有${len}个文件\n\n`);

        //     compilation.assets[FileName] = {
        //         source: function(){
        //             return content;
        //         },
        //         size: function(){
        //             return content.length
        //         }
        //     };
        //     callback();
        // })
        compiler.hooks.emit.tapPromise("FileListWebpackPlugin",compilation=>{
            return new Promise(resolve=>{
                setTimeout(function(){
                    console.log("timeout 1s")
                    resolve();
                }, 1000)
            }).then(()=>{
                const FileName = this.filename;
                let len = Object.keys(compilation.assets).length;
                let content = Object.keys(compilation.assets).reduce((acc, filename)=>{
                    return acc + `- ${filename}\n`
                }, `# 一共有${len}个文件\n\n`);

                compilation.assets[FileName] = {
                    source: function(){
                        return content;
                    },
                    size: function(){
                        return content.length
                    }
                };
            })
        })
    }
}
module.exports = FileListWebpackPlugin;

源码地址