5.html-webpack-plugin插件的使用

最新推荐文章于 2023-02-16 15:43:01 发布

原创最新推荐文章于 2023-02-16 15:43:01 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用cnpm安装html-webpack-plugin插件，并在项目中应用，实现在内存中创建index.html并自动引入打包后的js文件。通过具体步骤演示webpack.config.js的配置方法，包括开发服务器设置、入口文件指定、输出路径定义及插件使用。

//安装
cnpm i html-webpack-plugin -D

//在src下新建一个模板index.html
//插件做的事情是在内存中创建一个index.html并引入打包后的js文件

//此时webpack.config.js变成如下
let path = require("path")
let hwp = require("html-webpack-plugin")
module.exports = {
	//开发服务器的配置
	devServer:{
		port:3000,
		progress:true,
		contentBase:'./dabao'
	},
	mode:"development",
	entry:"./src/index.js",
	output:{
		filename:"build.js",
		path:path.resolve(__dirname,'dabao')
	},
	plugins:[
		new hwp({
			template:"./src/index.html"
		})
	]
}