小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
webpack使用UglifyJsPlugin进行代码压缩及source-map的使用
  • 首页 > 前端 > 自动构建
  • 作者:小昱
  • 2017年6月22日 15:05 星期四
  • 浏览:267
  • 字号:
  • 评论:0
  • webpack 自带了 UglifyJsPlugin,它运行 UglifyJS 来压缩输出文件。

    此插件支持所有的 UglifyJS 选项。在命令行中指定 --optimize-minimize,或在 plugins 配置中添加:

    webapck.config.js

    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = function() {
        return {
            entry: {
                main: './index.js' //Notice that we do not have an explicit vendor entry here
            },
            output: {
                filename: '[name].js',
                path: path.resolve(__dirname, 'dist')
            },
    
            plugins:[
                new webpack.optimize.UglifyJsPlugin({
                    compress: {
                        //supresses warnings, usually from module minification
                        warnings: false
                    },
                    // 这里的soucemap 不能少,可以在线上生成soucemap文件,便于调试
                    sourceMap: true,
                    mangle: true,
                    comments: false,
                    beautify: false
                }),
                new webpack.SourceMapDevToolPlugin({
                  filename: '[name].js.map',
                  exclude: ['vendor.js']
                })
            ]
        };
    }

    一些常用选项

    sourceMap: true, //生成sourceMap
    comments: false, //去掉注释
    beautify: false //代码美化

    上述代码,我们启用了sourceMap,通过SourceMapDevToolPlugin插件可以实现source-map的对应,便于调试。

    比如,我们在index.js中写入

    // 注释。。。 
    console.log(a);

    可以注意到a并没有定义,输出会报错,如果调试的时候使用压缩后的代码会非常头痛,此时打开chrome的调试工具可以看到:、

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: webpack使用UglifyJsPlugin进行代码压缩及source-map的使用
    本文地址:http://www.xiaoyulive.top/?post=95
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号