03webpack打包html
2021-08-11 本文已影响0人
0说
目录
index.js
function add(a, b) {
return a + b;
}
console.log(add(1,2))
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="title">
这里是标题
</div>
</body>
</html>
webpack.config.js
const { resolve } = require('path');
/*
html-webpack-plugin
作用是： 默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
*/
const htmlWebpackPlugins = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname,"build")
},
module: {
rules: [
]
},
plugins: [
new htmlWebpackPlugins({
// 作用是：以src/index.html 为基础模块引入打包后的资源
template: './src/index.html'
})
],
mode: 'development'
}
打包完
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="build.js"></script></head>
<body>
<div id="title">
这里是标题
</div>
</body>
</html>
