Webpack 4 學習09（打包生成html）

所需插件 html-webpack-plugin 本教程基於已經搭建好的webpack環境，詳見 Webpack 4 學習01（基礎配置）

• **瞭解html-webpack-plugin**

  HtmlWebpackPlugin會自動爲你生成一個HTML文件，根據指定的index.html模板生成對應的 html 文件。

• 安裝依賴

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

• 配置webpack.config.js文件

  • 在頭部定義常量，引入插件

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

  • 在plugins模塊引入

    new HtmlWebpackPlugin({
           template:'./public/index.html',  //模板文件路徑
           filename:'webpack.html',         //生成的html文件名稱
           minify:{
             minimize:true,                 //打包爲最小值
             removeAttributeQuotes:true,    //去除引號
             removeComments:true,           //去除註釋
             collapseWhitespace:true,       //去除空格
             minifyCSS:true,                //壓縮html內css
             minifyJS:true,                 //壓縮html內js
             removeEmptyElements:true,      //清除內存爲空的元素
           },
           hash:true                        //引入產出資源的時候加上哈希避免緩存
         })

• 運行打包命令以後就能夠壓縮

  webpack --mode development

• 打包效果

  public 下的 index.html 打包成爲 build下面的 webpack.html啦。