09、生产html模板

最新推荐文章于 2022-08-06 14:12:49 发布

碵蝎

最新推荐文章于 2022-08-06 14:12:49 发布

阅读量196

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/QQ408896436/article/details/105394018

版权

webpack 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>

碵蝎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
09、生产html模板

1、安装html-webpack-plugin插件cnpm i html-webpack-plugin2、配置const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry : './src/main.js',...
复制链接

扫一扫

专栏目录