一、HtmlWebpackPlugin

1.作用

自动创建HTML

自动创建HTML：在构建过程中自动生成一个HTML5文件，该文件可以包含所有webpack打包过程中生成的bundles。这意味着你不需要手动创建HTML文件，插件会为你处理这一切。
自动注入资源：自动将打包生成的JavaScript、CSS等文件注入到生成的HTML文件中，无需手动添加script或link标签。 这一点特别有用，因为随着使用代码分割等技术，输出文件的名称可能会发生变化。

定制HTML模板

使用模板：HtmlWebpackPlugin允许使用自定义的HTML模板。你可以指定一个模板文件，插件将基于这个模板来生成最终的HTML文件，这对于需要定制页面结构的场景非常有用。
灵活配置：插件提供了多种配置选项，如修改输出的HTML文件名、压缩HTML输出、设置meta标签等，使得生成的HTML文件可以满足不同的需求。

2.VUE使用

安装

npm install html-webpack-plugin --save-dev

安装后若运行报错 可降低版本到4.0.0

vue.config.js配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    publicPath: '',//使用相对路径
    productionSourceMap: false,
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Custom',
                filename: 'custom.html', // 输出文件名
                template: 'public/index.html',// 模板文件路径
            })
        ]
    }

}

项目打包

npm run build

在dist文件夹下生成如下结构

打开Custom.html,可见script或link标签。

二、HtmlWebpackInlineSourcePlugin

作用

html-webpack-inline-source-plugin是一个用于Webpack的插件，它的主要功能是在生成的HTML模板文件中，将原本通过script和link标签引用的外部资源（如JS和CSS）内联到HTML文档中。这意味着你的静态资源可以无需额外的网络请求就能立即执行或应用，极大地提高了首屏加载速度和用户体验。
通常与 html-webpack-plugin 一起使用

使用

安装

npm install --save-dev html-webpack-inline-source-plugin

vue.config.js配置