uglifyjs-webpack-plugin 中文文檔

原文檔地址

此插件使用uglify-js進行js文件的壓縮。

requirements

該模塊需要的環境： node 6.9.0 webpack 4.0.0 版本以上。

getting started

開始之前，需要安裝 uglifyjs-webpack-plugin:

$ npm install uglifyjs-webpack-plugin --save-dev

然後將該插件添加到你工程webpcak的config。例如：

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  //...
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
};

運行webpack.

Options

test

Type: String|RegExp|Array<String|RegExp> Default: /.js(?.*)?$/i

測試匹配的文件。

// in your webpack.config.js
new UglifyJsPlugin({
  test: /\.js(\?.*)?$/i
})

include

Type: String|RegExp|Array<String|RegExp> Default: undefined

包括的文件。

// in your webpack.config.js
new UglifyJsPlugin({
  include: /\/includes/
})

exclude

Type: String|RegExp|Array<String|RegExp> Default: undefined

不包含的文件。

// in your webpack.config.js
new UglifyJsPlugin({
  exclude: /\/excludes/
})

cache

Type: Boolean|String Default: false

啓用文件緩存。默認的緩存路徑爲： node_modules/.cache/uglifyjs-webpack-plugin.

如果您使用自己的minify函數，請正確閱讀minify部分以瞭解緩存失效。

Boolean

啓用緩存/關閉緩存

// in your webpack.config.js
new UglifyJsPlugin({
  cache: true
})

String

啓用緩存，並設置緩存的路徑。

webpack.config.js

// in your webpack.config.js
new UglifyJsPlugin({
  cache: 'path/to/cache'
})

cacheKeys

Type: Function<(defaultCacheKeys, file) -> Object> Default: defaultCacheKeys => defaultCacheKeys

允許重寫默認的cache keys.

默認的cache keys:

({
  'uglify-js': require('uglify-js/package.json').version, // uglify version
  'uglifyjs-webpack-plugin': require('../package.json').version, // plugin version
  'uglifyjs-webpack-plugin-options': this.options, // plugin options
  path: compiler.outputPath ? `${compiler.outputPath}/${file}` : file, // asset path
  hash: crypto.createHash('md4').update(input).digest('hex'), // source file hash
});

// in your webpack.config.js
new UglifyJsPlugin({
  cache: true,
  cacheKeys: (defaultCacheKeys, file) => {
    defaultCacheKeys.myCacheKey = 'myCacheKeyValue';
 
    return defaultCacheKeys;
  },
})

parallel

Type: Boolean|Number Default: false

使用多進程並行運行來提高構建速度。默認併發運行次數:os.cpus().length- 1。

並行化可以顯著地加速構建，因此強烈推薦使用並行化。

Boolean

啓用/禁用多進程並行運行。

// in your webpack.config.js
new UglifyJsPlugin({
  parallel: true
})

Number

啓用多進程並行運行和設置併發運行次數。

// in your webpack.config.js
new UglifyJsPlugin({
  parallel: 4
})

sourceMap

Type: Boolean Default: false

使用sourceMap將錯誤消息位置映射到模塊(這會減慢編譯速度)。如果您使用自己的minify函數，請閱讀minify部分以正確處理sourceMap。

cheap-source-map 屬性不適用於此插件。

// in your webpack.config.js
new UglifyJsPlugin({
  sourceMap: true
})

minify

Type: Function Default: undefined

允許覆蓋默認的minify函數。默認插件使用uglify-js包。用於使用和測試未發佈的版本或分支。

⚠️當啓用並行選項時，在minify函數中使用require。

// in your webpack.config.js
new UglifyJsPlugin({
  minify(file, sourceMap) {
    const extractedComments = [];
 
    // Custom logic for extract comments
 
    const { error, map, code, warnings } = require('uglify-module') // Or require('./path/to/uglify-module')
      .minify(file, {
        /* Your options for minification */
      });
 
    return { error, map, code, warnings, extractedComments };
  }
})

uglifyOptions

Type: Object Default: default

UglifyJS 壓縮選項。

// in your webpack.config.js
new UglifyJsPlugin({
  uglifyOptions: {
    warnings: false,
    parse: {},
    compress: {},
    mangle: true, // Note `mangle.properties` is `false` by default.
    output: null,
    toplevel: false,
    nameCache: null,
    ie8: false,
    keep_fnames: false,
  }
})

extractComments

Type: Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object> Default: false

是否將註釋提取到單獨的文件中(請參閱詳細信息)。默認情況下只提取註釋中使用/^\**!|@preserve|@license|@cc_on/i正則條件並刪除剩餘註釋。若原始文件命名爲foo.js。然後註釋將被存儲到foo.js.LICENSE.uglifyOptions.output.comments選項指定是否保留註釋，也就是說，在提取其他註釋時可以保留一些註釋，甚至保留已經提取的註釋。

Boolean

啓用/禁用提取註釋。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: true
})

String

提取所有或一些（使用/^\**!|@preserve|@license|@cc_on/i正則匹配）註釋。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: 'all'
})

RegExp

所有匹配正則表達式的註釋將被提取到單獨的文件中。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: /@extract/i
})

Function<(node, comment) -> Boolean>

所有匹配正則表達式的註釋將被提取到單獨的文件中。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: function (astNode, comment) {
    if (/@extract/i.test(comment.value)) {
      return true;
    }
    
    return false;
  }
})

Object

允許自定義條件提取註釋，指定提取文件名和banner。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: {
    condition: /^\**!|@preserve|@license|@cc_on/i,
    filename(file) {
      return `${file}.LICENSE`;
    },
    banner(licenseFile) {
      return `License information can be found in ${licenseFile}`;
    }
  }
})

condition

Type: Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>

設置需要提取的註釋。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: {
    condition: 'some',
    filename(file) {
     return `${file}.LICENSE`;
    },
    banner(licenseFile) {
     return `License information can be found in ${licenseFile}`;
    }
  }
})

filename

Type: Regex|Function<(string) -> String> Default: ${file}.LICENSE

提取註釋的文件將會被存儲。默認是將後綴. license附加到原始文件名。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: {
    condition: /^\**!|@preserve|@license|@cc_on/i,
    filename: 'extracted-comments.js',
    banner(licenseFile) {
     return `License information can be found in ${licenseFile}`;
    }
  }
})

banner

Type: Boolean|String|Function<(string) -> String> Default: /*! For license information please see ${commentsFile} */

banner文本指向提取的文件並將被添加到原始文件的頂部。可能是 false(沒有banner)，a string, 或者一個Function<(string) -> String>,將使用存儲了提取註釋的文件名調用。將被納入註釋。

// in your webpack.config.js
new UglifyJsPlugin({
  extractComments: {
    condition: true,
    filename(file) {
     return `${file}.LICENSE`;
    },
    banner(commentsFile) {
     return `My custom banner about license information ${commentsFile}`;
    }
  }
})

warningsFilter

Type: Function<(warning, source) -> Boolean> Default: () => true

允許過濾uglify-js警告。返回true以保持警告，否則爲false。

// in your webpack.config.js
new UglifyJsPlugin({
  warningsFilter: (warning, source) => {
    if (/Dropping unreachable code/i.test(warning)) {
      return true;
    }
 
    if (/filename\.js/i.test(source)) {
      return true;
    }
 
    return false;
  },
})

Examples

Cache And Parallel

啓用緩存並且啓用多進程並行運行。

// in your webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true
      })
    ]
  }
};

Preserve Comments

提取所有法律條文(例如 /^\**!|@preserve|@license|@cc_on/i)和保存/@license/i的註釋。

// in your webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: /@license/i
          }
        },
        extractComments: true
      })
    ]
  }
};

Custom Minify Function

覆蓋默認的壓縮方法-使用 terser 進行壓縮。（壓縮方法見原文檔）

// in your webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        // Uncomment lines below for cache invalidation correctly
        // cache: true,
        // cacheKeys(defaultCacheKeys) {
        //   delete defaultCacheKeys['uglify-js'];
        //
        //   return Object.assign(
        //     {},
        //     defaultCacheKeys,
        //     { 'uglify-js': require('uglify-js/package.json').version },
        //   );
        // },
        minify(file, sourceMap) {
          // https://github.com/mishoo/UglifyJS2#minify-options
          const uglifyJsOptions = {
            /* your `uglify-js` package options */
          };
      
          if (sourceMap) {
            uglifyJsOptions.sourceMap = {
              content: sourceMap,
            };
          }
      
          return require('terser').minify(file, uglifyJsOptions);
        },
      })
    ]
  }
};

首次翻譯，翻譯不足的地方，請多多指教。