webpack手写——编写一个plugin(二)

最新推荐文章于 2025-04-27 09:11:00 发布

我是一个脸

最新推荐文章于 2025-04-27 09:11:00 发布

阅读量404

点赞数 1

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/qq_20464593/article/details/106518558

版权

webpack 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何从零开始创建一个Webpack插件，包括项目初始化、编写插件代码、使用compiler.hooks钩子进行编译过程干预，以及如何在dist目录生成额外文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目初始化

1.新建一项目plugin并初始化npm init -y
2.安装webpack: npm install webpack webpack-cli --save-dev
3.新建src目录,在src目录下新建index.js
index.js

console.log('hello world')

4.在根目录下新建webapck.config.js
webapck.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

5.添加脚本
package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

6.运行npm run build, 打包生成dist/main.js

编写插件

需求: 实现一个插件plugin, 在打包结束之后在dist目录下生成一个版权文件
定义插件
在根目录下新建一文件夹plugins,在文件夹下再新建一文件copyright-webpack-plugins/plugin.jscopyright-webpack-plugin.js

class CopyrightWebpackPlugin {
    constructor() {
        console.log('插件被使用了')
    }
    apply(compiler) {

    }
}
module.exports = CopyrightWebpackPlugin

使用插件
webapck.config.js

const path = require('path')
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    plugins: [
        new CopyrightWebpackPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

运行npm run build

为插件传递参数

plugins: [
        new CopyrightWebpackPlugin({
            name: 'kate'
        })
    ],

class CopyrightWebpackPlugin {
    constructor(options) {
        // console.log('插件被使用了')
        console.log(options)
    }
    apply(compiler) {

    }
}
module.exports = CopyrightWebpackPlugin

compiler.hooks
1.emit(异步时刻)
copyright-webpack-plugin.js

class CopyrightWebpackPlugin {
    //compiler: webpack当中的实例
    apply(compiler) {
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => {
            // console.log(compilation.assets) //main.js
            //在dist目录下生成一个版权文件
            compilation.assets['copyright.txt'] = {
                //内容
                source: function(){
                    return 'copyright by kate'
                },
                //文件大小
                size: function() {
                    return 17
                }
            }
            cb()
        })
    }
}
module.exports = CopyrightWebpackPlugin

运行npm run build,成功在dist目录下生成版权文件:
在这里插入图片描述
2.compile(同步时刻)

class CopyrightWebpackPlugin {
    //compiler: webpack当中的实例
    apply(compiler) {
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => {
            // console.log(compilation.assets) //main.js
            //在dist目录下生成一个版权文件
            compilation.assets['copyright.txt'] = {
                //内容
                source: function(){
                    return 'copyright by kate'
                },
                //文件大小
                size: function() {
                    return 17
                }
            }
            cb()
        })
        compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
            console.log('compiler')
        })
    }
}
module.exports = CopyrightWebpackPlugin

查看compilation中的参数

开启node调试工具
package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"
  },

设置断点

class CopyrightWebpackPlugin {
    //compiler: webpack当中的实例
    apply(compiler) {
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => {
            //设置断点
            debugger
            // console.log(compilation.assets) //main.js
            //在dist目录下生成一个版权文件
            compilation.assets['copyright.txt'] = {
                //内容
                source: function(){
                    return 'copyright by kate'
                },
                //文件大小
                size: function() {
                    return 17
                }
            }
            cb()
        })
        compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
            console.log('compiler')
        })
    }
}
module.exports = CopyrightWebpackPlugin