webpack构建后执行JS脚本，修复html节点不闭合的问题

前端使用Webpack打包后，生成的html一般类似下面，head中一些节点是不闭合的，一般情况下浏览器能正常解析。

项目的甲方指定了使用Weblogic部署项目，这里将前端打包的dist目录放在后台的resources/static目录下，用spring发布。部署后出现了一个奇怪的问题，前端不能正常加载打包生成的html，并且在后台日志中报错。经过测试发现是因为html节点不闭合，才导致这个问题。所以本文要解决的问题是打包后自动修复html节点不闭合的问题。
在网上没有找到webpack提供某种配置能直接解决这个问题，于是编写JS脚本后处理打包生成的html文件。这里调用了https://tool.oschina.net网站的接口完成html格式化。
脚本内容如下(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节点就全部变成闭合节点，如下：

使用JS脚本，还可以实现更多功能，这里只是我的一个小小应用，希望能让读者有所收获。

原文：https://www.cnblogs.com/zealGIS/p/15208088.html