1.使用npm下载plugin
npm i html-webpack-plugin -D
/*
webpack配置文件，作用：指示webpack怎么干活，干哪些活
当你运行webpack指令的时候，会加载其中的配置
所有的构建工具都是基于Node.js来运行的，模块化使用的Commonjs
*/
//插件：1下载， 2引入， 3使用
//npm i html-webpack-plugin -D
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// webpack配置
// 入口起点
entry : './src/index.js',
// 输出
output :{
filename : 'build.js',
path : resolve(__dirname,'build')
},
//loader的配置
module:{
rules:[
]
},
//插件的配置
plugins:[
//功能：默认会创建一个空的HTML页面，自动引入打包输出的所有资源(js/css)
//需求有结构的html
new HtmlWebpackPlugin({
//复制 './src/index.html'文件，自动引入打包输出的资源
template:'./src/index.html'
})
],
//模式
mode:'development'
//mdde:'production'
}
3.创建入口文件index.js
console.log('hello');
4.创建空白html文件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>webpack04</title>
</head>
<body>
<h1 id="title">hello</h1>
</body>
</html>
5.执行webpack命令打包
webpack
5.会自动生成一个build.js文件和一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>webpack04</title>
</head>
<body>
<h1 id="title">hello</h1>
<script src="build.js"></script></body>
</html>
可以看到，新生成的index.html文件，自动引入了build.js文件
6.测试效果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
