3、自动生成htm（hmtl-webpack-plugin插件）

最新推荐文章于 2025-02-10 22:50:30 发布

原创最新推荐文章于 2025-02-10 22:50:30 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

webpack 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何通过Yarn安装并配置HTMLWebpackPlugin插件，实现Webpack自动生成HTML文件，包括引入JS，并展示了生成的示例HTML结构。

自动生成html，利用hmtl-webpack-plugin插件

yarn add html-webpack-plugin -D，下载插件

yarn add html-webpack-plugin -D

在webpack.config.js引入插件，书写：const HtmlWebpackPlugin = require('html-webpack-plugin')
配置插件，书写：plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })]

// 绝对路径
const path = require('path')
// 引入自动生成html的插件(html-webpack-plugin)
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
	// 入口(entry)
	entry: './src/index.js',
	// 出口(entry)
	output: {
		// 输出的目录必须是一个绝对路径__dirname
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	// 模式(entry)
	mode: 'development',
	// 引入插件
	plugins: [
		new HtmlWebpackPlugin({ template: './public/index.html' })
	]

}

yarn build，最后执行webpack打包，就自动生成html文件，以及自动引入js文件

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
<script defer src="bundle.js"></script></head>

<body>
	<h1>Hello World!</h1>
</body>

</html>