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啦。

    Webpack 4 学习09(打包生成html)

上一篇:在vue中添加ico图标


下一篇:Webpack之Plugins