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

最新推荐文章于 2024-07-20 19:48:15 发布

我是大头鸟

最新推荐文章于 2024-07-20 19:48:15 发布

阅读量405

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/datouniao1/article/details/119453424

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

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

我们继续之前的项目：

1. 下载 html-webpack-plugin

cnpm i html-webpack-plugin -D

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

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

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

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

希望对你有所帮助

我是大头鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 项目使用 html-webpack-plugin（3）

html-webpack-plugin 这个插件的功能是将 html 文件打包，在上一篇的博客中我们使用webpack-server将webpack项目使用本地的项目打开如：loalhost:3000具体内容：https://blog.csdn.net/datouniao1/article/details/119449220但是最终显示的结果如上，显示这个目录下面的文件，并不是我们想要的index.html页面，这也就是因为我们的html 参与项目的打包。那么如何将项目打包，才能实现首页是我们.
复制链接

扫一扫

专栏目录