npm i -D html-webpack-plugin 会在打包结束后，自动生成html文件，并把打包生成的js自动引入到这个html文件中

webpack.config.js 下的配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

// plugins可以在webpack运行到某个时刻的时候，帮你做一些事情
plugins: [
    new HtmlWebpackPlugin({ // npm i -D html-webpack-plugin
        template: 'src/index.html' // 以index.html为模板打包 src下的index.html模板 
        // 不需要自己再写root根标签
    }),
],

=====

在src下写一个html模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html模板</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

clean-webpack-plugin插件：用于删除output path下的文件夹

npm i -D clean-webpack-plugin

// 旧版本
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin(['dist'])
],

// 新版本
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin() // 删除的是output.path
],