当前位置: 首页 > Web前端 > JavaScript

webpack5自定义插件,在插入html的js文件中添加时间戳

时间:2023-03-27 13:29:49 JavaScript

给js文件添加时间戳,避免文件缓存不更新01webpack.config.tsimport*aspathfrom'path';import*aswebpackfrom'webpack';importHelloWorldfrom'./src/plugins/HelloWorld';constHtmlWebpackPlugin=require('html-webpack-plugin');constconfig:webpack.Configuration={entry:'./src/index.ts',mode:'development',module:{规则:[{测试:/\.(ts|tsx)$/,使用:'ts-loader',排除:/node_modules/,}]},resolve:{extensions:['ts','js','tsx'],modules:['node_modules'],},output:{filename:'bundle.js',path:path.resolve(__dirname,'dist'),},plugins:[newHelloWorld(),newHtmlWebpackPlugin(),]}导出默认配置;02tsconfig.json{"compilerOptions":{"outDir":"./dist/","noImplicitAny":true,"target":"es5","jsx":"react","allowJs":true,}}03src/plugins/HelloWorld.ts使用插件自定义钩子的方式发生了变化:compilation.plugin['xxx']->HtmlWebpackPlugin.getHooks(compilation)alterAssetTagGroups将要插入html的脚本分组后触发的hook,找到特定文件:(i.attributes?.srcasstring)?.indexOf('bundle.js')>-1重新修改文件src:我。attributes.src=${i.attributes.src}?${(newDate().valueOf())};import{Compiler}from"webpack";import*asHtmlWebpackPluginfrom'html-webpack-plugin';export默认类HelloWorld{staticdefaultOptions={outputFile:'assets.md',}name="HelloWorld";选项:任何;constructor(options:any={}){this.options={...HelloWorld.defaultOptions,...options,}}apply(compiler:Compiler){constpluginName=HelloWorld.name;const{webpack}=编译器;const{编译}=webpack;const{RawSource}=webpack.来源;compiler.hooks.thisCompilation.tap(pluginName,(compilation)=>{compilation.hooks.processAssets.tap({name:pluginName,stage:Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,},(assets)=>{constcontent="#在这个build:\n\n"+Object.keys(assets).map(filename=>`-${filename}`).join('\n');compilation.emitAsset(this.options.outputFile,newRawSource(content))});})compiler.hooks.compilation.tap(pluginName,(compilation)=>{HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(HelloWorld.name,(config)=>{//console.log(config.headTags.forEach(i=>console.log(i)));config.headTags.forEach(i=>{console.log((i.attributes?.srcasstring)?.indexOf('bundle.js')>-1);if(i.tagName==='script'&&(i.attributes?.srcasstring)?.indexOf('bundle.js')>-1){i.attributes.src=`${i.attributes.src}?${(newDate().valueOf())}`;}})返回配置;})})}}