webpack5-加载html资源以及html资源压缩

最新推荐文章于 2023-12-23 13:19:33 发布

原创

最新推荐文章于 2023-12-23 13:19:33 发布 · 944 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #webpack #前端

本文介绍了如何在webpack5中使用html-webpack-plugin加载html资源，详细讲解了插件的安装、配置以及如何创建并引入html文件。此外，还讨论了如何通过设置minify属性来实现html文件的压缩，以减小文件大小，提高页面加载速度。

webpack5加载html资源

加载html文件需要html-webpack-plugin插件

安装html-webpack-plugin

在webpack.config.js中引入html-webpack-plugin插件，

const HtmlWebpackPlugin = require('html-webpack-plugin')

并且创建html-webpack-plugin对象

    // 插件
    plugins: [
        // 详细的plugins配置
        // 创建HtmlWebpackPlugin对象
        new HtmlWebpackPlugin()
    ],

执行webpack命令时，会默认会创建一个空的html文件，并且会默认引入打包输出的所有资源（如js资源或者样式资源）

在src文件夹中创建一个index.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack</title>
</head>

<body>
    <div>webpack5学习</div>