HtmlWebpackPlugin插件

HtmlWebpackPlugin

1.作用

自动创建HTML

自动创建HTML：在构建过程中自动生成一个HTML5文件，该文件可以包含所有webpack打包过程中生成的bundles。这意味着你不需要手动创建HTML文件，插件会为你处理这一切。
自动注入资源：自动将打包生成的JavaScript、CSS等文件注入到生成的HTML文件body中，无需手动添加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标签。