webpack4使用html-webpack-plugin插件的使用

山海皆可平，难平是人心

于 2019-08-14 15:49:30 发布

阅读量1.7k

点赞数

分类专栏：前端 webpack4 文章标签： webpack4 前端开发

本文链接：https://blog.youkuaiyun.com/qq_41210698/article/details/99576381

版权

本文介绍了在webpack4中如何使用html-webpack-plugin插件。通过手动创建项目结构，初始化配置，安装必要依赖，展示了webpack-dev-server用于调试而webpack编译用于生成实际文件的过程。最终，编译后在build目录下生成了index.html，手动打开后，控制台能正常打印内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手动创建一些文件夹和文件

用命令初始化

cnpm init -y

安装该练习所用到的依赖

cnpm install webpack webpack-cli html-webpack-plugin -D

目录结构如下

index.js

console.log("index在控制台打印")

print.js

console.log("print在控制台打印")

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

package.json

{
  "name": "webpack4-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test":

最低0.47元/天解锁文章