zoukankan      html  css  js  c++  java
  • 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 -- 当dowhilefor循环的判断条件可以确定是,对其进行优化。

    • warnings -- 当删除没有用处的代码时,显示警告

  • 相关阅读:
    获取父子栏目内容的知识点总结:更多信息页面的信息内容获取
    获取栏目内容的知识点总结:SingleInfoSortPortlet类型笔记(单栏目的获取)
    JBPM插件安装(MyEclipse8.5测试成功)和配置
    获取栏目内容的知识点总结:KnobInfoSortPortlet类型笔记(没有层级关系的栏目信息)
    HTML的事件说明
    正交投影、格拉姆施密特正交(一)
    子级Repeater获取父级Repeater绑定项的值
    启用IIS6的Gzip压缩功能
    属性IsLocked不可用于登录"[sa]解决办法
    在IE流览器中正确显示PNG透明图片
  • 原文地址:https://www.cnblogs.com/chaixiaozhi/p/8604719.html
Copyright © 2011-2022 走看看