前言:项目一直在用webpack 打包,也系统的跟着B站的视频教程去学过,但是总是觉得差了点什么,有些配置还是不知道,决定把一些例子写下来总结下知识点,顺便学习下webpack5。
目标:将打包的js资源自动引用到html 文件
使用html-webpack-plugin 插件做该功能
步骤:
const { resolve } = require('path')
const HtmlwebpackPligin = require('html-webpack-plugin')
module.exports = {
entry:'./src/index.js',
output:{
filename:'app.js',
path:resolve(__dirname,'dist')
},
plugins:[
//默认什么不写的时候,会自动创建index.html,引入打包完成的资源
//同时支持title/template/templateContent 等参数
new HtmlwebpackPligin({})
],
mode:'development'
}
然后安装html-webpack-plugin
插件
什么都不指定的情况下,自动创建了.html和引入了打包的资源文件
当然可以设置配置html 内容等参数,比如设置:
//默认什么不写的时候,会自动创建index.html,引入打包完成的资源
//同时支持title/template/templateContent 等参数
new HtmlwebpackPligin({
title:'html-demo',
templateContent: `
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
`
})
效果如下: