html-webpack-plugin

最新推荐文章于 2023-07-03 00:46:30 发布

森岛。

最新推荐文章于 2023-07-03 00:46:30 发布

阅读量366

点赞数

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

本文链接：https://blog.csdn.net/c_mp_/article/details/97014088

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用简单的例子记录html-webpack-plugin插件

在使用html-webpack-plugin插件之前的需要手动的创建script，引入bundle.js

<head>
    <meta charset="utf-8">
	<title></title>
	<script src="/bundle.js"></script--> 
</head>

在控制台输入npm run dev预览
在这里插入图片描述
右键–查看网页源代码，代码和上面的一样

在使用html-webpack-plugin插件之后的不需要手动的创建script

在终端输入命令npm i html-webpack-plugin -D导入在内存中生成HTML页面的插件
然后在网页中预览，右键–查看网页源代码，这是时候代码就比原来多了一行，因此不需要手动引入bundle.js
在这里插入图片描述

html-webpack-plugin插件的作用

这个插件已经自动帮我们创建了一个合适的script，并且引用正确路径的bundle.js文件
自动在内存中根据指定页面生成一个内存的页面
自动把打包好的bundle.js追加到页面中

另外，只要是插件，就一定要放到plugins节点中

 plugins:[//配置插件的节点
     new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
		 template:path.join(__dirname,'/src/index.html'),/**指定的模板页面，将来会根据指定
		 的页面路径，去生成内存中的页面**/
		 filename:'index.html'//指定生成的页面名称
	 })

森岛。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-webpack-plugin

用简单的例子记录html-webpack-plugin插件在使用html-webpack-plugin插件之前的需要手动的创建script，引入bundle.js<head> <meta charset="utf-8"> <title></title> <script src="/bundle.js"></scrip...
复制链接

扫一扫