当前位置：首页 > article >正文

webpack自定义插件 ChangeScriptSrcPlugin

article 2024/10/20 5:27:54

插件文件

class ChangeScriptSrcPlugin {
  apply(compiler) {
    const pluginName = "ChangeScriptSrcPlugin";
    compiler.hooks.compilation.tap(pluginName, (compilation, callback) => {
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
        pluginName,
        (htmlPluginData, callback) => {
          htmlPluginData.body
            .filter(item => {
              const { attributes } = item;
              return (
                attributes.src.includes("main") &&
                attributes.type === "text/javascript"
              );
            })
            .forEach(ele => {
              ele.attributes.src = ele.attributes.src.replace(
                "http://localhost:3000/",
                "http://localhost:3000/"
              );
            });
          callback(null, htmlPluginData);
        }
      );
    });
  }
}

module.exports = ChangeScriptSrcPlugin;

配置文件 webpack.config.js

// webpack.config.js
var ChangeScriptSrcPlugin = require('ChangeScriptSrcPlugin.js');

module.exports = {
  // ... 这里是其他配置 ...
  plugins: [new ChangeScriptSrcPlugin()],
};

一、compiler 和 compilation的区别和作用

/** 1、compiler（编译器）  和 compilation（编译）的区别 和 作用
     * 打包是被细分为很多个子进度的。
     * compiler 是 webpack 打包过程的一个编译器，这个对象上有打包过程中的很多钩子函数。
     * compilation 是 compiler上的一个子进度，也包含了许多钩子函数。htmlWebpackPluginAlterAssetTags就是其中一个
     *
     * 在编译的每个阶段中，任何插件都拥有对 compiler 对象的完全访问能力，
     * 并且在合适的时机，还可以访问当前的 compilation 对象。
   *
   * compiler 
   * 1. 包含整个构建流程的全部钩子，通过它可以把控整个 webpack 构建周期。
   * 2. 在运行期间 compiler 会根据 webpack 不同阶段触发的各种事件钩子，执行插件附加/绑定在 hook 上的函数。
   * 3. 只是负责维持生命周期运行的功能，所有的加载、打包和写入工作，都被委托到注册过的插件上了。
   * 4. 对象代表的是构建过程中不变的 webpack 环境，整个 webpack 从启动到关闭的生命周期。针对的是webpack。
   * 
   * compilation 
   * 1. 只代表一次新的编译，只要项目文件有改动，compilation 就会被重新创建。针对的是随时可变的项目文件。
   * 2. 负责：构建 module 和 chunk，并利用插件优化构建过程，同时把本次打包编译的内容全存到内存里

作者：AizawaSayo
链接：https://www.jianshu.com/p/fb3a8182838c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
     * */

2. htmlWebpackPluginAlterAssetTags 方法

/** 2、htmlWebpackPluginAlterAssetTags
 *  上边这个钩子函数，必须得让webpack使用  📚📚htmlWebpackPlugin📚 才能访问
 *  HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。
 * */

3. tabTable

/** 3、Tabable  类的方法
  * 参考 https://zhuanlan.zhihu.com/p/367931462 理解Tapable
  * Tabable 
  * Tapable 使用时通常需要经历如下步骤：
  *  1. 创建钩子实例
  *  2. 调用【订阅接口】，【注册】回调，包括：tap、tapAsync、tapPromise
  *  3. 调用【发布接口】，【触发】回调，包括：call、callAsync、promise
        （之前我一直以为 发布订阅 是 先发布 再订阅，注册是在发布这一步做的。） 
   *
   * 同步 hook 只能使用 tap 方法；而异步 hook 除了 tapAsync 和 tapPromise 这些异步方法，也支持用 tap 方法让 hook 以同步方式运行。
     * */

在这里插入图片描述