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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
vue路由插件之vue-route
Jun 13 Javascript
浅谈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
德生9700DX电路分析
2021/03/02 无线电
PHP类中Static方法效率测试代码
2010/10/17 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
学习js所必须要知道的一些
2007/03/07 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
javascript实现数独解法
2015/03/14 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
详解JS模块导入导出
2017/12/20 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python实现自动更换ip的方法
2015/05/05 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python callable内置函数原理解析
2020/03/05 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
Python安装Bs4的多种方法
2020/11/28 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
剪彩仪式主持词
2014/03/19 职场文书
大学生就业意向书范文
2014/04/01 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书