最近寫了個小外掛報了個警告，然後去百度了一下，全都給我說extract-text-webpack-plugin這個外掛有問題要更新，我也是無語了，這個外掛我用都沒用，百度翻了下齊刷刷全是這個答案，搞得我都懷疑自己然後把node_modules翻了一遍確定沒有使用這個外掛，後來去谷歌上搜了一下，第一條就告訴我為什麼了，直白來說，webpack裡的Tapable類的plugin已經廢棄了，請使用hooks api來替代，那外掛的程式碼怎麼寫呢

<script>
// 舊的使用方法
class myPlugin {
    constructor (doneCallback, failCallback) {
      // 初始化
    }
    apply (compiler) {
        var that = this;
        compiler.plugin('compilation', function (compilation, options) {
            compilation.plugin('htmlWebpackPluginAlterAssetTags', function (
                htmlPluginData,
                callback,
            ) {
                console.log('在別人的外掛勾子裡做些處理');
            });
        });
    }
}
</script>
 

<script>
// 新的使用方法
class ScriptWebpackPlugin {
    constructor (doneCallback, failCallback) {
        // 初始化
    }
    apply (compiler) {
        var that = this;
        compiler.hooks.compilation.tap('ScriptWebpackPlugin', compilation => {
            compilation.hooks.htmlWebpackPluginAlterAssetTags.tap('ScriptWebpackPlugin', htmlPluginData => {
                console.log('在別人的外掛勾子裡做些處理');
            });
        });
    }
}
</script>
 

這樣子就不會報警告了，看到自己寫的程式碼出現警告還是挺不爽的，現在的文章好多都是過時的和複製的真的誤導人，webpack的外掛鉤子在這裡https://webpack.js.org/api/compiler-hooks/#aftercompile