html-webpack-plugin 插件

作用

1. devServer时，根据模板在项目的根目录下生成html文件。（类似于webpack-dev-server在内存中生成bundle.js）。
2. devServer时，对html文件自动引入bundle.js文件。
3. 打包时，自动生成index.html文件。 :::warning 使用这个插件时，就不用在index.html文件中引入 bundle.js 的标签。 :::

安装

npm i html-webpack-plugin -D

配置

在 webpack.config.js 中的 plugins 节点下配置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: "bundle.js"
  },
  mode: 'development',
  plugins: [
    // 配置 html-webpack-plugin
    new HtmlWeabpackPlugin({
      filename: 'index.html', // 在内存中生成的文件名
      template: './src/index.html' // 模板，以磁盘上的这个文件为模板，不用引入 bundle.js
    })
  ],
  // 配置 webpack-dev-server
  devServer: {
    open: true,
    compress: true,
    hot: true,
    port: 3000,
    contentBase: './src'
  }
}