打包壓縮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 最小化　　

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 -- 當do、while 、 for循環的判斷條件可以確定是，對其進行優化。

• warnings -- 當刪除沒有用處的代碼時，顯示警告

webpack學習（六）打包壓縮js和css