第四十九篇：webpack的基本使用(三) --安装和配置html-webpack-plugin插件

好家伙，

 

1.html-webpack-plugin的作用

 

讲一下为什么需要这个插件

存在问题:在点开locahost:8080之后出现的是项目的根目录,而不是网页

 

这时候需要再点开scr文件夹才能看见index首页

所以我们想要一进8080就能够看到index首页,

 

解决方法:我们可以把index放到根目录中,

但是这与"规范"冲突了,

("规范":程序员写的代码必须放在src文件夹)

 

所以如果我们的能够将index复制一份,再搬运到根目录下

就可以一进8080就能够看到index首页,

这也就是html-webpack-plugin插件的作用

 

 

 2.安装html-webpack-plugin插件

终端跑一下:

npm install html-webpack-plugin@5.3.2 -D

 

 

3.配置html-webpack-plugin

在webpack.config.js中进行配置:

 

 // 1.导入 HTML 插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

 // 2.创建 HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',// 指定原文件的存放路径
    filename:'./index.html',// 指定生成的文件的存放路径
})

module.exports={

　　mode: 'development',

　　plugins: [htmlPlugin],// 3. 通过 plugins 节点，使 htmlPlugin 插件生效,webpack在运行时,会加载并调用这些插件

}

配置完后重新npm run dev

进入locahost:8080就可以直接看见index首页了

 

补充:html-webpack-plugin插件会把复制件放到内存中,所以是在根目录中看不见的.

 

 

That's all