TerserWebpackPlugin

Posted on 2019-01-01 Edited on 2023-11-24 In webpack Views: Disqus:

一個基本的 webpack.config.js 內容如下

const path = require('path');

module.exports = {
    entry: {
        apple: './src/apple.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        minimize: false,
        minimizer: [

        ]
    }
};

上面範例我要特別強調 optimization.minimize 與 optimization.minimizer 的用法，

optimization.minimizer 屬性是用來放入各種壓縮 js 程式碼套件，如 TerserWebpackPlugin。

optimization.minimize 屬性就像是 optimization.minimizer 的開關，

當 optimization.minimize 為 true 時，則在編譯 js 檔時就會執行 optimization.minimizer 所指定的套件，

當 optimization.minimize 為 false 時，則在編譯 js 檔時，不管 optimization.minimizer 是否有指定套件，

皆不會壓縮 js 程式碼。

一個預設的 TerserPlugin 的 Minify options 如下

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: {
        apple: './src/apple.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: ['coreJS', '[name]']
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    ecma: undefined,
                    warnings: false,
                    parse: {
                        // parse options
                    },
                    compress: {
                        // compress options
                    },
                    mangle: true, // Note `mangle.properties` is `false` by default.
                    module: false,
                    output: {
                        // output options
                    },
                    toplevel: false,
                    nameCache: null,
                    ie8: false,
                    keep_classnames: undefined,
                    keep_fnames: false,
                    safari10: false
                }
            })
        ]
    }
};

terserOptions 裡面還有四個細項設定，以下列出參考資料

舉一個用 TerserWebpackPlugin 來壓縮 js 程式碼並移除注解範例

檔案結構為

src/apple.js 內容為

/**comment 1*/
export function FuncApple() {
    //comment 2
    console.log("I'm apple");
}

webpack.config.js 內容為

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: {
        apple: './src/apple.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: ['coreJS', '[name]']
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    output: {
                        comments: false
                    }
                }
            })
        ]
    }
};