html-webpack-plugin插件主要作用是什么，怎么用-群英

上一篇：HTML中弹框滚动禁止遮罩页面滚动效果怎么做下一篇：HTML直接引用vue和element-ui的代码是什么

这篇文章给大家分享的是html-webpack-plugin插件主要作用是什么，怎么用。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

最近在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插件主要作用是什么，怎么用的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。