webpack 打包压缩js和css的方法示例


Posted in Javascript onMarch 20, 2018

打包压缩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,如果混淆的话就会影响到代码的正常运行。

列几个压缩时常有的属性:

  1. dead_code -- 移除没被引用的代码
  2. loops -- 当 do 、 while 、 for 循环的判断条件可以确定是,对其进行优化。
  3. warnings -- 当删除没有用处的代码时,显示警告

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
浅谈Node 调试工具入门教程
Mar 20 #Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 #Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
关于vue面试题汇总
Mar 20 #Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 #Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 #Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 #Javascript
You might like
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
javascript基本算法汇总
2016/03/09 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
留学自荐信
2013/10/10 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
教师评语大全
2014/04/28 职场文书
村安全生产责任书
2014/08/25 职场文书
党性观念心得体会
2014/09/03 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
教师听课学习心得体会
2016/01/15 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
vue实现在data里引入相对路径
2022/06/05 Vue.js