webpack学习(六)打包压缩js和css
打包压缩js与css
由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件,
其命令webpack -p
即表示调用UglifyJS来压缩代码,还有不少webpack插件如html-webpack-plugin
也会默认使用UglifyJS。
uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用兼容开发分支。
UglifyJS可用的选项有:
parse 解释
compress 压缩
mangle 混淆
beautify 美化
minify 最小化 //在插件HtmlWebpackPlugin中使用
CLI 命令行工具
sourcemap 编译后代码对源码的映射,用于网页调试
AST 抽象语法树
name 名字,包括变量名、函数名、属性名
toplevel 顶层作用域
unreachable 不可达代码
option 选项
STDIN 标准输入,指在命令行中直接输入
STDOUT 标准输出
STDERR 标准错误输出
side effects函数副作用,即函数除了返回外还产生别的作用,比如改了全局变量
列一份配置:
//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: {
bundle : './src/js/main.js'
},
output: {
filename: "[name]-[hash].js",
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}) },
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'url-loader?limit=8192'
}
]
},
resolve:{
extensions:['.js','.css','.json'] //用于配置程序可以自行补全哪些文件后缀
}, plugins:[
new HtmlWebpackPlugin({
title: 'hello webpack',
template:'src/component/index.html',
inject:'body',
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
}),
new ExtractTextPlugin("[name].[hash].css"),
new webpack.optimize.UglifyJsPlugin({
compress: { //压缩代码
dead_code: true, //移除没被引用的代码
warnings: false, //当删除没有用处的代码时,显示警告
loops: true //当do、while 、 for循环的判断条件可以确定是,对其进行优化
},
except: ['$super', '$', 'exports', 'require'] //混淆,并排除关键字
})
]
};
这里需要注意的是压缩的时候需要排除一些关键字,不能混淆,比如$或者require,如果混淆的话就会影响到代码的正常运行。
列几个压缩时常有的属性:
dead_code
-- 移除没被引用的代码loops
-- 当do
、while
、for
循环的判断条件可以确定是,对其进行优化。warnings
-- 当删除没有用处的代码时,显示警告
webpack学习(六)打包压缩js和css的更多相关文章
- ASP.NET MVC使用Bundle来打包压缩js和css
Bundle它是用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 1.BundleConfig配置Bundl ...
- 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css
在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)
转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和c ...
- 在MVC中使用Bundle打包压缩js和css
第一步:安装 安装“System.Web.Optimization”:在中“NuGet”中搜索 安装. 第二步:配置 配置“Views”目录下的“web.config”文件增加“System.Web. ...
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
该总结参考博文地址:http://www.cnblogs.com/xwgli/p/3296809.html 1.首先了解Bundle的作用:Bundles用于打包CSS和javascript脚本文件, ...
- (转)yuicompressor 与 maven结合,打包,压缩js,css (一)
js,css代码压缩 web站点需要对js,css代码进行压缩,打包,下面是利用maven进行打包压缩的配置 将压缩后的代码打入到war包中,并且压缩后的js,css文件名不变 <plugins ...
- Bundle压缩JS和CSS
ASP.NET MVC之Bundle压缩JS和CSS 介绍Bundle之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.J ...
- yui压缩JS和CSS文件
CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS. 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参 ...
- [Asp.net MVC]Bundle合并,压缩js、css文件
摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...
随机推荐
- wamp server环境下mysql数据库的密码为什么修改不了?
每次这个控制台,不输入密码可以直接用,用root登录都登录不了.修改root密码也修改不了.困惑? 经过不断的尝试终于找到解决的办法: 1,在mysql的配置文件my.ini的末尾添加 skip-gr ...
- ACdream 1031 Cut
题意:给定一棵树,删除一些边,让整棵树被分成多个节点数为偶数的联通块,且联通块尽量多. 思路:如果出现连通且节点数为偶数的立即删除这个点与它父节点之间的边,尽量删除即可,因为题目说了保证n为偶数,删了 ...
- CodeForces-748B
关键在于判断是否能够得到解决办法,我的思路就是用一个数组来记录每个小写字母对应的按键,如果它出现对应两个级以上不同的按键那么就说明不能得出解决办法,直接打印'-1'.如果能够得出解决办法,就扫描一下数 ...
- Docker集群编排工具之Kubernetes(K8s)介绍、安装及使用
K8s基础原理 k8s中文社区:https://www.kubernetes.org.cn/ 简介 Kubernetes与较早的集群管理系统Mesos和YARN相比,对容器尤其是 Docker的支持更 ...
- 6.2 PowerPC处理器如何处理MSI中断请求
PowerPC处理器使用OpenPIC中断控制器或者MPIC中断控制器,处理外部中断请求.其中MPIC中断控制器基于OpenPIC中断控制器,但是作出了许多增强,目前Freescale新推出的Powe ...
- 用GA算法设计22个地点之间最短旅程-R语言实现
数据挖掘入门与实战 公众号: datadw 相关帖子 转载︱案例 基于贪心算法的特征选择 用GA算法设计22个地点之间最短旅程-R语言实现 ----------------------------- ...
- 在U-boot中添加以太网驱动
当定义CONFIG_CMD_NET和CONFIG_CMD_PING,编译之后执行ping命令,告警没有找到以太网. 因此,需要打开U-boot的网络功能, u-boot-sunxi-sunxi中没有找 ...
- dojo拼接成CSV格式字符串
var student = "学号,姓名,年龄\n"; for(var i = 0;i<resp.items.length;i++) { student += resp.it ...
- dojo报错总结
dojo报错总结 1.错误一 neteaseTracker is not defined dojo.js(第15行) 2.错误二 _10 is undefined _SearchMixin.js(第5 ...
- Flex中的FusionCharts 3D饼图
1.3D饼图设计源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns: ...