网站建设 公众号,学做网站多久,建网站需要哪些步骤,中国建设银行信用卡网站熟悉 vue 和 react 的小伙伴们都知道#xff0c;在执行过程中会有各种生命周期钩子#xff0c;其实webpack也不例外#xff0c;在使用webpack的时候#xff0c;我们有时候需要在 webpack 构建流程中引入自定义的行为#xff0c;这个时候就可以在 hooks 钩子中添加自己的方… 熟悉 vue 和 react 的小伙伴们都知道在执行过程中会有各种生命周期钩子其实webpack也不例外在使用webpack的时候我们有时候需要在 webpack 构建流程中引入自定义的行为这个时候就可以在 hooks 钩子中添加自己的方法。 创建插件
webpack 加载 webpack.config.js 中所有配置此时 webpack 创建 compiler 对象遍历所有 plugins 中插件调用插件的 apply 方法执行剩下编译流程触发各个 hooks 事件具体使用什么钩子和钩子是同步还是异步请移步compiler 钩子
创建一个 JavaScript 命名函数或 JavaScript 类在插件函数的 prototype 上定义一个 apply 方法绑定到 webpack 自身的事件钩子上导出这个JavaScript 命名函数或 JavaScript 类在 webpack.config.js 文件中引入并调用方法
自定义 banner-webpack-plugin
自定义 banner-webpack-plugin 插件该插件会在每一个打包后的 js 、css 文件第一行添加注释先看效果图。
emit 钩子是输出 asset 到 output 目录之前执行获取即将输出的资源文件compilation.assets遍历 assets只处理js和css资源其他文件不处理通过 content entcompilation.assets[filename].source() 获取原来内容拼接上注释 content prefix content修改资源的 source 和 size
// plugins/banner-webpack-plugin.jsclass BannerWebpackPlugin {constructor(options {}) {this.options options;}apply(compiler) {// 在资源输出之前触发compiler.hooks.emit.tap(BannerWebpackPlugin, (compilation) {const extensions [css, js];const prefix /** Author: ${this.options.author}* Build Time: ${new Date()}*/;// 获取即将输出的资源文件compilation.assetsfor (const filename in compilation.assets) {if (compilation.assets.hasOwnProperty(filename)) {// 将文件名进行切割const splitted filename.split(.);// 获取文件扩展名const extension splitted[splitted.length - 1];// 只处理js和css资源其他文件不处理if (extensions.includes(extension)) {const asset compilation.assets[filename];// 获取原来内容let content asset.source();// 拼接上注释content prefix content;// 修改资源compilation.assets[filename] {// 最终资源输出时调用source方法source方法的返回值就是资源的具体内容source: () content,// 资源大小size: () content.length,};}}}});}
}
module.exports BannerWebpackPlugin;调用 BannerWebpackPlugin
// config/webpack.config.js// 引入插件
const BannerWebpackPlugin require(../plugins/banner-webpack-plugin);
module.exports {plugins: [// 调用插件new BannerWebpackPlugin({author: 小小愿望,}),],
};自定义 take-time-webpack-plugin
自定义 take-time-webpack-plugin 插件该插件输出 “webpack 构建正在启动”打包完成后输出 webpack 构建已完成总耗时 { time } ms先看效果图。
// plugins/take-time-webpack-plugin.js// 一个命名的 Javascript 方法 或 JavaScript 类
class TakeTimeWebpackPlugin {time 0;// 原型上需要定义 apply 的方法apply(compiler) {// 生命周期钩子函数是由 compiler 暴露// 通过 compiler 获取 webpack 内部的钩子获取 Webpack 打包过程中的各个阶段compiler.hooks.environment.tap(TakeTimeWebpackPlugin, (compilation) {console.log(\x1B[36m, webpack 构建正在启动);this.time new Date().getTime();});// 通过 compiler 获取 webpack 内部的钩子获取 Webpack 打包过程中的各个阶段compiler.hooks.afterEmit.tapAsync(TakeTimeWebpackPlugin, (compilation, callback) {const nowTime new Date().getTime();this.time nowTime - this.time;const str webpack 构建已完成总耗时 ${this.time} msconsole.log(\x1B[32m, str);// 分为同步和异步的钩子异步钩子在功能完成后必须执行对应的回调callback();});}
}
module.exports TakeTimeWebpackPlugin;调用 TakeTimeWebpackPlugin
在 config/webpack.config.js 文件中引入并执行 TakeTimeWebpackPlugin
// config/webpack.config.js// 引入插件
const TakeTimeWebpackPlugin require(../plugins/take-time-webpack-plugin);
module.exports {plugins: [// 调用插件new TakeTimeWebpackPlugin(),],
};
