js压缩

webpack自带一个插件uglifyjs-webpack-plugin来压缩js，所以不需要再次安装，当一切都准备妥当，引入uglifyjs-webpack-plugin模块：

const uglify = require('uglifyjs-webpack-plugin');

因为它是一个插件，所以把它放在plugins里：

plugins:[

    new uglify()

]

这样就完事了，执行命令webpack，压缩文件就OK了，一般不会出现问题，（但是我在实际操作中报错了，uglifyjs-webpack-plugin没有找到，所以，如果你报错了，还是安装一下吧）

npm install uglifyjs-webpack-plugin --save-dev

打包HTML文件

首先删除dist目录下的所有文件，然后在src文件下创建index.html文件，

/src/index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>webpack</title>

</head>

<body>

    <div id="title"></div>

</body>

</html>

配置webpack.config.js文件，安装html-webpack-plugin插件

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

然后引入改插件：

const htmlPlugin =  require('html-webpack-plugin');

在plugins下，加载htmlPlugin插件

plugins:[

    new uglify(),

    new htmlPlugin({

        minify:{

            removeAttributeQuotes:true

        },

        hash:true,

        template:'./src/index.html'

    })

]
  • minify：是对html文件进行压缩， removeAttributeQuotes是去掉属性的双引号；
  • hash：为了开发中js有缓存效果，加入hash，可以有效避免js缓存；
  • template：需要打包的HTML模板路径和文件名称；

参考地址：

webpack 3.X学习之JS压缩与打包HTML文件的更多相关文章

  1. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  2. webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  3. webpack配置：css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  4. 手把手教你webpack、react和node.js环境配置（上篇）

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  5. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  6. webpack之基础学习

    webpack工作原理: 通过一个入口文件,main.js开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件. Webpack的核心原理 ...

  7. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

  8. webpack 3.X学习之多页面打包

    简介 我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包 我们知道要打包 ...

  9. 学习rollup.js模块文件打包

    学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...

随机推荐

  1. 深入浅出：JavaScript作用域链

    1. 什么是作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量的作用范围. 2. 变量的分类和变量作用域的分类 在JavaScript中,变量分为全局变量和局部变量,与此相对应的,变量 ...

  2. win10 + python3.6 + VSCode + tensorflow-gpu + keras + cuda8 + cuDN6N环境配置

    写在前面的话: 再弄这个之前,我对python也好,tensorflow也好几乎是0认知的,所以配置这个环境的时候,走了不少弯路,整整耗费了一个星期的时间才搭配完整这个环境,简直了...然而最气的是, ...

  3. 转：C++输入一行字符串的一点小结

    原文链接: http://www.wutianqi.com/?p=1181 大家在学习C++编程时,一般在输入方面都是使用的cin.而cin是使用空白(空格,制表符和换行符)来定字符串的界的.这就导致 ...

  4. .NET采集数据，放入数据库总结

    第一次做采集Json的还简单一些但是XML的简直了......... JSON //采集数据 public string GetBetRecordToRepository()//随便你返回什么 { t ...

  5. Linux文件系统的层级结构

    Linux文件系统的层级结构   文件结构 倒置的树状结构 :Linux的哲学思想是一切皆文件,把几乎所有资源统统抽象为文件形式:包括硬件设备,甚至通信接口等 根目录 :linux的文件起始均从唯一的 ...

  6. [译]ASP.NET Core 2.0 全局配置项

    问题 如何在 ASP.NET Core 2.0 应用程序中读取全局配置项? 答案 首先新建一个空项目,并添加两个配置文件: 1. appsettings.json { "Section1&q ...

  7. .NET程序集引用COM组件MSScriptControl所遇到的问题

    问题描述:为了在C#中执行js脚本,在一个目标平台编译为Any Cpu的.NET程序集中引用了MSScriptControl组件,在winform程序中,调用这个程序集中的执行js的方法,没有任何问题 ...

  8. javascript倒计时调转页面

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  9. Yii2之事件

    众所周知,yii的三大特性是:属性.事件.行为,上一篇博文简单讲解了yii中的属性,本文接着讲讲yii的事件. 事件是代码解耦的一种方式,设计业务流程的一种模式.在yii2.0中,通过Yii\base ...

  10. 【推荐】地推统计结算工具SDK，手机开发首选

    地推是推广app的一种重要手段,同时地推结算对地推统计的精度的要求非常高,而openinstall就是一款符合要求的地推统计结算工具.它不仅多渠道统计能力强,安装设备识别精准,渠道统计精度高.还支持地 ...