最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

1、安装

cnpm i webpack-plugin -D

2、在webpack.config.json中引用

const path = require(path)const htmlWebpackPlugin = require(html-webpack-plugin) //第一步module.exports = {    entry: path.join(__dirname, ./src/main.js),    output: {        path: path.join(__dirname, ./dist),        filename: bundle.js,    },    mode: development,    devServer: {        open: true,        port: 8080,        hot: true,        contentBase: src    },    plugins: [        new htmlWebpackPlugin({ //第二步        template: path.join(__dirname, ./src/index.html), //指定生成模板的路径        filename: index.html //指定生成页面的名称        })    ]}

3、html-webpack-plugin的作用

一、在内存中生成一个指定模板的文件，在访问时速度更快
二、自动为指定模板文件添加bundle.js文件

到此这篇关于详解html-webpack-plugin使用的文章就介绍到这了,更多相关html-webpack-plugin使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！