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

webpack自定义插件 ChangeScriptSrcPlugin

news 2025/8/2 23:11:31

插件文件

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 以同步方式运行。* */

在这里插入图片描述