HtmlWebpackPlugin插件简化HTML文件创建，在对于文件名中包含每次回随着编译而变化的哈希bundle文件

功能

简化HTML文件创建，在对于文件名中包含每次回随着编译而变化的哈希bundle文件非常有用，该插件会生成一个HTML文件，其中包括使用 script 标签的 body 中的所有 webpack 包。

安装

npm install --save-dev html-webpack-plugin

配置

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

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename : "[name].bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use:[
          'file-loader'
        ]
      }
    ]
  }
}

生成的HTML文件

运行npm run build(假设已经设定好配置文件)，生成HTML文件：dist/index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Output Management</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script defer="defer" src="app.bundle.js"></script>
  <script defer="defer" src="print.bundle.js"></script>
</head>

<body></body>

</html>