09. 生产html模板

于2022-10-20 11:36:21发布

1、安装html-webpack-plugin插件

cnpm i html-webpack-plugin

2、配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    plugins : [
        new HtmlWebpackPlugin({
            template : './src/index.html',
            filename : 'index.html',
            minify : {
                minimize : true, //是否打包为最小值
                removeAttributeQuotes : true, //去除引号
                removeComments : true, //去除注释
                collapseWhitespace : true, //去除空格
                minifyCSS : true, //压缩html内的样式
                minifyJS : true, //压缩html内的js
                removeEmptyElements : true, // 清理内容为空的元素，这个慎用，有时候内容不为空也会被清理掉
            },
            hash : true //引入外部文件时加上哈希码，避免缓存
        })
    ]
}

3、打包

打包前的html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa{font-size: 100px;}
    </style>
</head>
<body>
 
    <h1></h1>
    <!--这里是注释-->
    <div class="aa">111222</div>
    <script src="./main.js"></script>
    <script>
        var abc = 100;
        console.log(abc);
    </script>
</body>
</html>

打包后的html文件

<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Document</title><style>.aa{font-size:100px}</style></head><body><div class=aa>111222</div><script src=./main.js></script><script>var abc=100;console.log(abc)</script><script src=main.js?a81f3b95d117653c4546></script></body></html>