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