html-webpack-plugin基本使用
html-webpack-plugin
插件用于:
- 在虚拟根目录下生成html文件
- 自动引用打包得到的文件
1 本地安装
npm i html-webpack-plugin -D
2 修改web.config.js文件
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 编译模式
mode: "development",
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js" //输出文件的名称
},
devServer: {
open: true,
port: 4000,
contentBase: "src",
hot: true
},
plugins: [
new htmlWebpackPlugin({
// 创建一个在内存中生成html页面的插件
template: path.join(__dirname, "./src/index.html"),
filename: "index.html"
})
]
};
3 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack初探</title>
<!--<script src="./bundle.js"></script>-->
</head>
<body>
<div id="app">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
我们不需要在本地文件中引用bundle.js
了,html-webpack-plugin
会为我们做好这些。