html-webpack-plugin & clean-webpack-plugin

html-webpack-plugin

Introduction：

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.

译文：HtmlWebpackPlugin简化了HTML文件的创建，为您的webpack包服务。这对于在文件名中包含散列的webpack包尤其有用，它会更改每次编译。您可以让插件为您生成一个HTML文件，使用lodash模板提供您自己的模板，或者使用您自己的加载程序。

权威讲解请移步: https://webpack.js.org/plugins/html-webpack-plugin/  or  https://github.com/jantimon/html-webpack-plugin

Installation：

npm install --save-dev html-webpack-plugin or npm i -D html-webpack-plugin

Usage:

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

module.exports = {
  entry: 'index.js',
  output: {
    filename: 'index_bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [new HtmlWebpackPlugin()]
}

这个插件有很多可配置参数：

plugins: [
  new HtmlWebpackPlugin({
    title: 'Output Management',
    filename: 'index-bundle.html'    /*----可以配置最终生成的文件名称---*/
    template: './src/index.html'      /*----可以配置初始模板---*/
  })
],

更多配置请移步：https://github.com/jantimon/html-webpack-plugin#options

 clean-webpacm-plugin  的作用是 Cleaning up the /dist folder  清除的目录可以名称可以配置

npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [new CleanWebpackPlugin()]