html-webpack-plugin如何配置

端木阳荣
2023-12-01

html-webpack-plugin插件的作用是让我们打开http://localhost:8080/地址时直接跳转到index.html

因为正常情况下我们打开http://localhost:8080/ 时浏览器会跳转到项目根目录

html-webpack-plugin 的配置如下

1.下载完插件后在配置文件 webppack.config.js 里用require导入并创建一个构造函数(其中 HtmlPlugin 是我们自定义的构造函数名):

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

2.利用刚创建的构造函数new一个实例 并设置文件路径:

const htmlplugin = new HtmlPlugin({

        template: './src/index.html',

        filename: './index.html'

})

3.在导出配置对象的模块中把new好的实例放到plugins节点下:

module.exprots = {

        plugins: [htmlplugin]

}

 类似资料: