Webpack处理HTML资源

最新推荐文章于 2023-07-15 23:15:04 发布

编码桐人

最新推荐文章于 2023-07-15 23:15:04 发布

阅读量161

点赞数

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

本文链接：https://blog.csdn.net/qq_35580927/article/details/128739334

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

处理HTML资源

该插件将为你生成一个HTML5文件，在body中使用script标签引入你所有webpack生成的bundle。只需添加该插件到你的webpack配置中。

1、下载包

npm install html-webpack-plugin -D

2、配置

@webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
	entry: 'main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'index_bundle.js'
	},
	plugins: [new HtmlWebpackPlugin(
		// 模板：以public/index.html文件创建新的html文件
		// 新的html文件特点：1、结构和原来一致 2、自动引入打包输出的资源
		template: path.resolve(__dirname, 'public/index.html')
	)]
}