webpack core concepts _ (Chapter III) _ use plugins to make packaging more convenient

In webpack different loader can complete package of different file types, this one written on how to use webpack of plugins, make packing easier.
There in the dist file a complete package index.html file, this is our manually copied to the dist folder, the purpose of easy access packed js files after generation. But each package must copy the index.html file a lot of trouble, is there any way you can help us solve this problem?
Webpack you can use plug-ins to help us achieve
Webpack ----> PLUGINS -----> HtmlWebpackPlugin
webpack how to use plug-ins?
1. First, install the plug
npm install -D html-webpack-plugin // 先安装插件
2. The introduction of the plug-in webpack.config.js webpack, there is disposed a plugins configuration attribute in the object inside, where the corresponding plug-in instantiated

 var HtmlWebpackPlugin = require('html-webpack-plugin')
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [new HtmlWebpackPlugin()]

We will dist file deletion, repackaging project run

discovery will automatically generate an index.html file in the dist directory

but also help us to introduce them to the html file in the packed out index.js
role HtmlWebpackPlugin plug
after HtmlWebpackPlugin plug-in end packaging, automatically generate a html file, and the package is automatically generated js introduced into the html file in
question is generated html file is not the root div, when we refer to in the index.js, it is being given a

html file generated plus root tag would be no problem
if we want to automatically generate an id packed in time to how to do to root label it, we can do a configuration webpack.config, js the plugin, make a template configuration

in the src the following build an index.html file you can follow the template to generate a
role HtmlWebpackPlugin is complete when the package will generate a html file, html file will be generated index.html file in the src directory as a template, and then will js packaged is injected into the html file.

webpack role in the plugin
plugin can run webpack some point to help you make
plugin like vue lifecycle functions. For example HtmlWebpackPlugin will (the end of the package) automatically help you do something at some point, some other plug-ins will help webpack to do something in another moment.
And then introduce another plugin
when we change the file name of the output generated js when, for example, index.js changed dist.js, Packing Packing found to generate dist.js file. index.html will reference the file, but before packaging generated index.js not removed, sometimes it will cause problems in the hope that when repackaged, can help us to automatically delete dist directory and then to execute package, to achieve this, we must help CleanWebpackPlugin

1. First install CleanWebpackPlugin npm install clean-webpack-plugin -D
2. In webpack.config, js references, array configuration plugin

var CleanWebpackPlugin = require('clean-webpack-plugin')
......
  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html'
  }), new CleanWebpackPlugin (['dist'])]  // 在打包之前使用CleanWebpackPlugin 插件帮助我们删除dist文件

3. Packaging run on it

In summary if you want to do some operation on webpack some packaged nodes, you can use a variety of plug-ins to help us achieve this function.