html-webpack-plugin 这个插件的功能是将 html 文件打包，在上一篇的博客中我们使用webpack-server将webpack项目使用本地的项目打开如：loalhost:3000

​

webpack 项目使用 html-webpack-plugin（3）_webpack

 但是最终显示的结果如上，显示这个目录下面的文件，并不是我们想要的index.html页面，这也就是因为我们的html 参与项目的打包。那么如何将项目打包，才能实现首页是我们的index.html,这就需要一个插件：html-webpack-plugin

我们继续之前的项目：

1. 下载 html-webpack-plugin

       cnpm i html-webpack-plugin -D

webpack 项目使用 html-webpack-plugin（3）_html页面_02

 2.修改 webpack.config.js

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); //导入，在内存中自动生成 index 页面
const htmlPlugin=new HtmlWebpackPlugin({
     template:path.join(__dirname,'./src/index.html'),
     filename:'index.html'
});



module.exports={
    mode:'development',
    plugins:[
        htmlPlugin
    ]
}

3.重新运行

npm run dev

webpack 项目使用 html-webpack-plugin（3）_html页面_03

 我们可以看到现在的localhost:3000 不再是文件的目录了，变成了项目的首页，这也就是我们的html-webpack-plugin的作用

4.需要注意的是在使用了html-webpack-plugin插件之后 我们的index.html页面会自动的引入相关的js

webpack 项目使用 html-webpack-plugin（3）_html_04

 那么我们就不需要手动的引入main.js了

index.html 如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hello</title>
    </head>
    <body>
       <h1>Hello World</h1>
    </body>
</html>

上面就是我们创建webpack的过程了

希望对你有所帮助