NiceLeeのBlog 用爱发电 bilibili~

Webpack Plugin制作5-与其它插件进行交互

2021-10-13
nIceLee

阅读:


我们换一种思路,对添加备注进行实现。

准备工作

本文的工程环境承接上文

这个简单的工程目录如下:

- build
- node_modules
- package.json
- plugins
    - 0.createLicense.js
    - 1.createFileList.js
    - 2.createLicense.js
    - 3.addRemark.js
- loaders
- src
    - index.js
    - index.html
- LICENSE

简单分析

上一节的思路是:

  • 我想在index.html里面加点内容,那好,我等着你生成一个主页文件,最后我再来改改。

现在,我们不妨这样思考:

  • 我想在index.html里面加点内容,那好,这个主页文件是HTML插件生成的吧,我让它这么这么改。

要按这个思路实现,我们得知道html-webpack-plugin给我们留了些什么接口,于是很自然的,去这个插件的仓库看看。 于是,在ReadMe里找的下面案例:

// If your plugin is direct dependent to the html webpack plugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
// If your plugin is using html-webpack-plugin as an optional dependency
// you can use https://github.com/tallesl/node-safe-require instead:
const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin');
class MyPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      console.log('The compiler is starting a new compilation...')
      // Static Plugin interface |compilation |HOOK NAME | register listener 
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'MyPlugin', // <-- Set a meaningful name here for stacktraces
        (data, cb) => {
          // Manipulate the content
          data.html += 'The Magic Footer'
          // Tell webpack to move on
          cb(null, data)
        }
      )
    })
  }
}
module.exports = MyPlugin

好了,现在可以照猫画虎了。

插件实现

const pluginName = 'AddRemarksPlugin';
const HtmlWebpackPlugin = require('html-webpack-plugin');
class AddRemarksPlugin {
    constructor(options = {}) {
        this.remarks = options.remarks || '<!-- 这是一条由AddRemarksPlugin生成的默认备注 -->'
    }
    apply(compiler) {
        const { hooks, options, webpack } = compiler;
        const outputPath = options.output.path
        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
            HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
                pluginName,
                (data, cb) => {
                    const raw = data.html
                    const start = raw.indexOf('<head>') + 6
                    const left = raw.substring(0, start)
                    const right = raw.substring(start)
                    data.html = `${left}\n${this.remarks}\n${right}`
                    cb(null, data)
                }
            )
        });
    }
}
module.exports = AddRemarksPlugin;

源代码

https://github.com/nicennnnnnnlee/webpack-plugin-loader-examples

系列文章

0-序
1-将LICENSE打包到目的文件夹
2-在打包目录输出文件列表
3-重写LICENSE打包插件
4-在index.html里添加一条备注
5-与其它插件进行交互
6-修改其它插件的配置
7-做一个自定义类型的loader


相似文章

内容
隐藏