webpack構建後執行JS指令碼，修復html節點不閉合的問題
阿新 • • 發佈：2021-08-31
前端使用Webpack打包後，生成的html一般類似下面，head中一些節點是不閉合的，一般情況下瀏覽器能正常解析。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<meta name="renderer" content="webkit" >
專案的甲方指定了使用Weblogic部署專案，這裡將前端打包的dist目錄放在後臺的resources/static目錄下，用spring釋出。部署後出現了一個奇怪的問題，前端不能正常載入打包生成的html，並且在後臺日志中報錯。經過測試發現是因為html節點不閉合，才導致這個問題。所以本文要解決的問題是打包後自動修復html節點不閉合的問題。
在網上沒有找到webpack提供某種配置能直接解決這個問題，於是編寫JS指令碼後處理打包生成的html檔案。這裡呼叫了https://tool.oschina.net
指令碼內容如下(postWork.js)：
/** * 格式化html檔案，修復一些html節點沒有結束斜槓，導致在weblogic環境不能正常載入 */ let fs = require('fs') const request = require('request'); function replaceAll (find, replace, str) { var find = find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); return str.replace(new RegExp(find, 'g'), replace); } fs.readFile('dist/index.html', 'utf8', function(err, data) { let formData = { html: data } let options = { method: 'POST', url: 'https://tool.oschina.net/action/format/html', headers: {'Content-Type': 'multipart/form-data'}, formData: formData }; request(options, (error, response, body) => { if (!error) { // 由於介面返回的尖括號和$符號已被轉碼，這裡使用替換的方式處理為正確的格式 let result = replaceAll('\\u003c', '<', body) result = replaceAll('\\u003e', '>', result) result = replaceAll('\\u0026', '&', result) result = JSON.parse(result) fs.writeFileSync('dist/index.html', result.fhtml, (err) => { if(err){ throw err } }) } else { console.log(error) } }); })
修改package.json的script
"scripts":{
"build": "cross-env NODE_ENV=production env_config=prod node build/build.js && node postWork.js",
...
}
執行 yarn build後，生成的dist/index.html的html節點就全部變成閉合節點，如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" />
使用JS指令碼，還可以實現更多功能，這裡只是我的一個小小應用，希望能讓讀者有所收穫。