webpack-html-plugin

1.什么是插件(plugin)?

plugin 用于扩展webpack的功能
当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域。
而plugin的功能更加的丰富，而不仅局限于资源的加载。

2.什么是HtmlWebpackPlugin?

HtmlWebpackPlugin会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中

3.HtmlWebpackPlugin使用

https://www.webpackjs.com/plugins/html-webpack-plugin/

3.1安装HtmlWebpackPlugin

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

3.2配置HtmlWebpackPlugin

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
plugins: [new HtmlWebpackPlugin()]

//plugins:告诉webpack需要新增一些什么样的功能
    plugins: [new HtmlWebpackPlugin()]

4.HtmlWebpackPlugin高级使用

https://github.com/jantimon/html-webpack-plugin#configuration
默认情况下HtmlWebpackPlugin生成的html文件是一个空的文件,
如果想指定生成文件中的内容可以通过配置模板的方式来实现

//plugins:告诉webpack需要新增一些什么样的功能
   plugins: [new HtmlWebpackPlugin({
       //template用来指定自己写的html文件，而不用自动创建的html文件
       template: './index.html',
   })]

默认情况下生成html文件并没有压缩,
如果想让html文件压缩可以设置

//plugins:告诉webpack需要新增一些什么样的功能
    plugins: [new HtmlWebpackPlugin({
        //template用来指定自己写的html文件，而不用自动创建的html文件
        template: './index.html',
        //配置minify，进行html文件的压缩
        minify:{
            collapseWhitespace: true,
        }
    })]