webpack 3.X学习之JS压缩与打包HTML文件
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文件的更多相关文章
- webpack快速入门——配置JS压缩，打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
- webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
- webpack配置：css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- 手把手教你webpack、react和node.js环境配置（上篇）
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- webpack之基础学习
webpack工作原理: 通过一个入口文件,main.js开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件. Webpack的核心原理 ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
- webpack 3.X学习之多页面打包
简介 我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包 我们知道要打包 ...
- 学习rollup.js模块文件打包
学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...
随机推荐
- OpenWRT （RT5350） 使能两个串口
OpenWRT(RT5350) 默认使能一个串口(uartlite) ,当做console口了,另外一个串口(uartf)与gpio复用. 在查找资料的过程中,发现在新的内核中使用到了设备树(devi ...
- 记录一个Unity播放器插件的开发
背景 公司最近在做VR直播平台,VR开发我们用到了Unity,而在Unity中播放视频就需要一款视频插件,我们调研了几个视频插件,记录两个,如下: Unity视频插件调研 网上搜了搜,最流行的有以下两 ...
- h5实现照片墙效果
<style> *{ margin: 0; padding: 0; } body{ background: url(images/bg.jpg); } #div1{ width: 100% ...
- 媲美jQuery的JS框架----AngularJS（二）
前言 对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看 ...
- 双十一临近，怎样让买家流畅地秒杀？ ——腾讯WeTest独家开放电商产品压测服务
WeTest 导读 十一月临近,一年一度的电商大戏"双十一"又将隆重出场,目前各大商家已经开始各类优惠券的发放,各类大促的商品表单也已经提前流出,即将流入各个用户的购物车中. 作为 ...
- 业余草双因素认证（2FA）教程
所谓认证(authentication)就是确认用户的身份,是网站登录必不可少的步骤.密码是最常见的认证方法,但是不安全,容易泄露和冒充.越来越多的地方,要求启用双因素认证(Two-factor au ...
- CentOS7安装GitLab、汉化及使用
同步首发:http://www.yuanrengu.com/index.php/20171112.html 一.GitLab简介 GitLab是利用Ruby On Rails开发的一个开源版本管理系统 ...
- Leetcode题解（20）
59. Spiral Matrix II 题目 这道题copy网上的代码 class Solution { private: ][]; ][]; public: void dfs(int dep, v ...
- HDU1255覆盖的面积
覆盖的面积 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- linq 在查询表达式中处理异常
在查询表达式的上下文中可以调用任何方法. 但是,我们建议避免在查询表达式中调用任何会产生副作用(如修改数据源内容或引发异常)的方法. 此示例演示在查询表达式中调用方法时如何避免引发异常,而不违反有关异 ...