默认使用webpack打包后，需要自己添加html文件，来引入打包完成的js文件。
此插件可以自动生成html文件，并自动引入经过webpack打包后的js文件。
安装：npm i --save-dev html-webpack-plugin
配置：
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
devtool: "source-map",
entry: {
home: "./src/index.js",
a: "./src/a.js"
},
output: {
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "home.html",
chunks: ["home"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "a.html",
chunks: ["a"]
})
]
}
html模板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>Document</title>
</head>
<body>
<h1>webpack</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid?
</p>
</body>
</html>
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
