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

原文地址:https://www.cnblogs.com/hunterxing/p/10425297.html

时间: 2024-11-08 01:17:00

Webpack 4 学习09(打包生成html)的相关文章

Webpack 4 学习02(使用配置文件进行打包)

上一讲中我们打包没有用到webpack.config.js配置文件,webpack4把自己定位为一个零配置的工具.这一讲学习配置文件使用,更好地学习webpack. 上一讲 Webpack 4 学习01(基础配置) 根目录下新建一个webpack.config.js文件 (记载配置信息) 配置文件 const path = require('path'); module.exports = { entry:'./public/index.js', output:{ path:path.resol

【Maven学习】Maven打包生成普通jar包、可运行jar包、包含所有依赖的jar包

http://blog.csdn.net/u013177446/article/details/54134394 ****************************************************** 使用maven构建工具可以将工程打包生成普通的jar包.可运行的jar包,也可以将所有依赖一起打包生成jar: 一.普通的jar包 普通的jar包只包含工程源码编译出的class文件以及资源文件,而不包含任何依赖:同时还包括pom文件,说明该包的依赖信息: 在工程pom文件下

webpack的学习使用一

webpack这个工具对我来说在学习初期有一点摸不着头脑.我用了两三天重复看教学视频总算有一点头绪,下面写写我学到的关于webpack的理解和笔记. 先看介绍http://webpackdoc.com/index.html "Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJ

Webpack 4 学习04(配置webpack-dev-server)

前提: Webpack 4 学习01(基础配置) ? Webpack 4 学习02(通过配置文件打包) 一.了解 webpack-dev-server webpack-dev-server用来配置本地服务器 为 webpack 打包生成的文件提供web服务 自动刷新和热替换(HMR) 二.安装webpack-dev-server npm install --save-dev webpack-dev-server 三. 配置webpack.config.js文件 devServer:{ conte

webpack到底是怎么打包的,多入口,草稿

webpack.config module.exports={ entry:['entry1.js','entry2.js'], output:{ path:'./dist', filename:'output.js' } } 豪不意外,对于普通的多入口webpack.config文件,打包出来的文件和单入口文件一样,把两个文件作为自执行函数的参数放在数组传了进去,不过这两个文件的位置是1和2(最开始以为是0和1对吧),位置0的是webpack自己生成的一个函数.是长这个样子的. * 0 */

【JavaScript】 Webpack安装及文件打包

背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已.经过多方调研,终于发现如何实现webpack的文件打包功能. 准备 在使用webpack之前,必须先要安装nodejs和npm. 安装完npm后,由于npm国内访问非常慢,可以设置为从淘宝的镜像下载各种资源包. npm config set registry http://registry.cnpm

Android学习--apk打包过程

1. 使用aapt工具,给所有的res目录下的资源文件生成对应的id,id会被放进R.java文件中 2. JavaC编译器,将所有Java文件转换为Class文件,其中,内部类会分别生成.class文件,命名格式为MainActivity$内部类.class R$String.class等 3. 将class中的公共常量提取出来,生成dex文件 4. aapt将生成的menifest+dex+resource+程序签名打包成zip格式,其实就是apk格式.说明,META-INF是程序签名信息

Unity3D研究院之IOS全自动打包生成ipa

接着上一篇文章, 自动生成framework,这篇文章我把shell自动化打包ipa整理了一下,希望大家喜欢,嘿嘿.. 建议大家先看一下上一篇文章.http://www.xuanyusong.com/archives/2720 首先我们要先搞清楚nity全自动打包的重要步骤. 1.自动生成xcode工程. 2.自动生成.ipa和dsym文件. 3.上传appstore(本篇略) 首先我们在做渠道包时,一般每个渠道都有自己一些特殊的需求,比如 游戏名子 .游戏图标.SDK.等等.那么我在在做自动化

C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码

前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯,前面讲了那么多,是时候生成一个APK在真机上玩玩了. 今天的学习内容? 也只讲一个,如何打包生成安卓可安装的APK并精简大小. 正文 我记得,之前在写安卓方面的文章的时候,有人就问过我.Xamarin.Android为什么打包出来这么大?随便一个HelloWord就20-30MB? 嗯..今天我们就来解决