webpack 打包压缩js和css的方法示例
作者:柴小智 发布时间:2023-07-02 05:18:32
打包压缩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 -- 当删除没有用处的代码时,显示警告
来源:https://www.cnblogs.com/chaixiaozhi/p/8604719.html
猜你喜欢
- 本文实例讲述了Codeigniter发送邮件的方法。分享给大家供大家参考。具体分析如下:Codeigniter的邮件发送支持一下特性:Mul
- 我目标文件夹下有一大批图片,我要把它转变为指定尺寸大小的图片,用pthon和opencv实现的。以上为原图片。import cv2impor
- cuda上tensor的定义a = torch.ones(1000,1000,3).cuda()某一gpu上定义cuda1 = torch.
- 但是如果在utf-8编码下,一个汉字是占3个字符长度的,比如字符串$str=”你好啊!!”; 如果你用strlen函数来判断,长度是11,正
- Golang: 接收GET和POST参数GET 和 POST 是我们最常用的两种请求方式,今天讲一讲如何在 golang 服务中,正确接收这
- 主键索引排序失效环境:MySQL8有一张用户信息表user_info,建表DDL如下:CREATE TABLE `user_info` (
- 本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库。为了方便前后台交互,利用了
- 开始我们将通过示例介绍偶数列表以及在 Python 中创建偶数列表的不同方法。什么是偶数本教程展示了如何在 Python 中制作偶数列表。
- lambda 语法lambda 函数的语法只包含一个语句,表现形式如下:lambda [arg1 [,arg2,.....argn]]:ex
- 做渗透测试的时候,有个比较大的项目,里面有几百个网站,这样你必须首先确定哪些网站是正常,哪些网站是不正常的。所以自己就编了一个小脚本,为以后
- python中ftplib模块支持ftp操作,主要使用FTP类。本文使用ftp操作进行连接FTP服务器、获取当前目录文件清单、上传文件等操作
- 实际需求中,需要对某张表某字段里面的内容进行批量替换,普通的思考流程如下:SELECT出来str_replace替换UPDATE写入实际这样
- 本文为大家分享了threadpool线程池中所有的操作,供大家参考,具体内容如下首先介绍一下自己使用到的名词:工作线程(worker):创建
- 安装SQL Server2016正式版今天终于有时间安装SQL Server2016正式版,下载那个安装包都用了一个星期安装包可以从这里下载
- 由于该项目是针对中小学生竞赛并且是第一次举行,所以识别的目标交通标志仅仅只有直行、右转、左转和停车让行。数据集:链接: https://pa
- 在上篇给大家介绍了Java中正则表达式的使用和详解(上),具体内容如下所示:1.常用正则表达式规则正则表达式语法 一个或多个汉字
- 背景(background)在项目中经常会使用。这篇文章主要讲解的是实际项目中的5个实例。通过具体的分析来达到学习的目的。1,Li列表通过u
- 在web2.0的站中用户互动性是很强的,例如用户留言我们可能放开img标签,允许用户外链其他站点的图片,那么我们就需要解决图片尺寸过大所带来
- 本文实例为大家分享了Python函数式编程实现登录注册功能的具体代码,供大家参考,具体内容如下代码:def login(username,
- 本文实例讲述了原生JS实现Ajax通过POST方式与PHP进行交互的方法。分享给大家供大家参考,具体如下:一、代码conn.php<?