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

冷不防 2022-09-03 08:25 224阅读 0赞

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

具体内容：[https://blog.csdn.net/datouniao1/article/details/119449220][https_blog.csdn.net_datouniao1_article_details_119449220]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

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

我们继续之前的项目：

1. 下载 html-webpack-plugin

cnpm i html-webpack-plugin -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

那么我们就不需要手动的引入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的过程了

希望对你有所帮助

[https_blog.csdn.net_datouniao1_article_details_119449220]: https://blog.csdn.net/datouniao1/article/details/119449220
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/974f9f4d36d140bb946c9225ff72a25e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/cb789100e5de40c2ab66bc42359e47d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/cdb57ac5c91d4431aaf3110756d790da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/3608c4722771488ab8a00f4e35191ac9.png