前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >webpack学习(六)打包压缩js和css

webpack学习(六)打包压缩js和css

作者头像
柴小智
发布2018-04-10 16:50:54
4.8K0
发布2018-04-10 16:50:54
举报
文章被收录于专栏:菜鸟计划

打包压缩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函数副作用,即函数除了返回外还产生别的作用,比如改了全局变量

列一份配置:

代码语言:javascript
复制
//使用插件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 -- 当删除没有用处的代码时,显示警告
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档