webpack打包html -1

最新推荐文章于 2025-07-01 23:07:02 发布

傻了吧唧小农民

最新推荐文章于 2025-07-01 23:07:02 发布

阅读量637

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack打包html 前端

本文链接：https://blog.youkuaiyun.com/zhoulucky1993/article/details/85226960

webpack 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何使用Node和Git搭建Webpack环境，包括安装必要软件、创建项目文件夹、配置Webpack及html-webpack-plugin插件，实现多入口打包，并在package.json中设置打包命令。

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

1：确保自己的电脑已经安装了node和Git软件

2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称)

3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：

1：npm install webpack -g

2: npm install webpack-cli -g

3: npm init -y

4: npm install webpack --save-dev

5 npm install html-webpack-plugin （html编译插件）

5：把项目拖进编辑器

6新建一个src文件夹和webpack.config.js

7:webpack.config.js内容配置如下：

const path=require("path");
const webpackHtmlPlugin  = require('html-webpack-plugin');

module.exports={
	entry:{
		index1:'./src/index1.js',
		index2:'./src/index2.js'
	},
	output:{
		path:path.resolve(__dirname,"dist"),
		filename:"[name].bun.js"
	},
	plugins:[
	        new webpackHtmlPlugin({
	        	minify:{
	        		collapseWhitespace:true,      //清除空格
	        		removeAttributeQuotes:true,    //清除多余引号
	        		removeComments:true           //删除注释

	        	},
	        	

	        	title:"hello",       //打包成功后的名字
                hash:true,          //图片缓存
                filename:"index.html"           //要打包的html名字    
	        	template:"./src/index.html"     //要打包的html路径
	        	
	        })
	]
}

8：package.json scripts配置如下：

"scripts": {
     "build": "webpack --mode production"    //production生产环境  development开发环境
  },

9：要打包的html title处需配置

<title><%=htmlWebpackPlugin.options.title%></title>

10：执行命令进行打包 npm run build