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 对比不同点 ...
随机推荐
- 批量下载验证码 shell
#!/bin/sh seq 0 699 | xargs -i wget http://www.5184.com/gk/common/checkcode.php -O img/{}.png
- Scrapy架构及其组件之间的交互
最近在学Python,同时也在学如何使用python抓取数据,于是就被我发现了这个非常受欢迎的Python抓取框架Scrapy,下面一起学习下Scrapy的架构,便于更好的使用这个工具. 一.概述 下 ...
- 深入理解计算机系统(4.2)------逻辑设计和硬件控制语言HCL
上一篇博客我们简单介绍了Y86指令集体系,而这篇博客我们将介绍指令集体系的逻辑设计和硬件控制语言HCL,为后面去实现Y86打下基础. 在硬件设计中,用电子电路来计算对位进行运算的函数,以及在各种存储器 ...
- 测试String.Format中的Format参数
DateTime datetime = DateTime.Now; Console.WriteLine(String.Format("{0:d}", datetime)); // ...
- 最美时光第三方UWP源码公开
自己大概写了一个星期的成果.. 使用了官方最美时光app的UI和图片资源,并没有调用官方接口 https://files.cnblogs.com/files/loyieking/NiceCountDo ...
- LINUX 笔记-文本过滤
^ 只匹配行首 $ 只匹配行尾 * 一个单字符后紧跟*,匹配0个 ...
- js-自定义事件
1.自定义事件 开发人员自己定义的事件,是除了系统以外的事件. 可以供其他开发人员使用,有利于多人写作开发,可扩展js的原有事件. 需要:事件绑定器.事件触发器 2.自定义事件三要素 ①:对象.事件名 ...
- 手把手教你解决无法创建 JPA 工程的问题
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7703803.html ------------------------------------ ...
- 点击下拉,其余不动的jquery事件(转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Linux系列教程(十)——Linux文本编辑器vim
通过前面几篇博客我们终于结束了Linux常用命令的介绍,Linux常用命令主要包括以下: ①.Linux文件和目录处理命令 ②.Linux链接命令和权限管理命令 ③.Linux文件搜索命令 ④.Lin ...