From 6f3584a19f64d81f16894f56550a72a83671c7e1 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Fri, 30 Jun 2017 00:33:19 +0200 Subject: [PATCH] squash: init options example --- README.md | 144 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 117 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index d14daebc..8e525249 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ [![coverage][cover]][cover-url] [![chat][chat]][chat-url] +
- @@ -15,27 +15,26 @@

This plugin uses UglifyJS v2 to minify your JavaScript.

+ > ℹ️ that webpack contains the same plugin under `webpack.optimize.UglifyJsPlugin`. This is a standalone version for those that want to control the version of UglifyJS. The documentation is valid apart from the installation instructions in that case.

Install

```bash -npm install uglifyjs-webpack-plugin --save-dev -yarn add uglifyjs-webpack-plugin --dev +npm i -D uglifyjs-webpack-plugin ``` -> ⚠️ The plugin has a peer dependency to uglify-es (UglifyJS), so in order to use the plugin, also uglify-js has to be installed. +> ⚠️ The plugin has a peer dependency to `uglify-es` (UglifyJS), so in order to use the plugin, also `uglify-es` has to be installed. ```bash -npm install uglify-es --save-dev -yarn add uglify-es --dev +npm i -D uglify-es ```

Usage

**webpack.config.js** ```js -const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); +const UglifyJSPlugin = require('uglifyjs-webpack-plugin') module.exports = { plugins: [ @@ -46,48 +45,104 @@ module.exports = {

Options

-This plugin supports UglifyJS features as discussed below: - |Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| -|**`compress`**|`{Boolean\|Object}`|`true`|See [UglifyJS documentation](http://lisperator.net/uglifyjs/compress)| +|**`test`**|`{RegExp\|Array}`| /\.js($|\?)/i|Test to match files against| +|**`output`**|`{Object}`|`{}`|An object providing options for UglifyJS [OutputStream](https://github.com/mishoo/UglifyJS2/blob/v2.x/lib/output.js) (Lower level access to `Uglifyjs` output)| |**`mangle`**|`{Boolean\|Object}`|`true`|See [below](https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/readme#mangle)| +|**`compress`**|`{Boolean\|Object}`|`true`|See [UglifyJS documentation](http://lisperator.net/uglifyjs/compress)| |**`beautify`**|`{Boolean}`|`false`|Beautify output| -|**`output`**|`{Object}`|`{}`|An object providing options for UglifyJS [OutputStream](https://github.com/mishoo/UglifyJS2/blob/v2.x/lib/output.js) (Lower level access to `Uglifyjs` output)| -|**`comments`**|`{Boolean\|RegExp\|Function<(node, comment) -> {Boolean}>}`| Defaults to preserving comments containing `/*!`, `/**!`, `@preserve` or `@license`. |Comment related configuration| +|**`comments`**|`{Boolean\|RegExp\|`false`|Function<(node, comment) -> {Boolean}>}`| Defaults to preserving comments containing `/*!`, `/**!`, `@preserve` or `@license`| |**`extractComments`**|`{Boolean\|RegExp\|Function<(node, comment) -> {Boolean\|Object}>}`|`false`| Whether comments shall be extracted to a separate file, (see [details](https://github.com/webpack/webpack/commit/71933e979e51c533b432658d5e37917f9e71595a), since webpack 2.3.0)| -|**`sourceMap`**|`{Boolean}`|`false`|Use SourceMaps to map error message locations to modules. This slows down the compilation. ⚠️ **`cheap-source-map` options don't work with the plugin!**| -|**`test`**|`{RegExp\|Array}`| /\.js($|\?)/i |Test to match files against| +|**`warningsFilter`**|`{Function(source) -> {Boolean}}`|``|Allow to filter uglify warnings (since webpack 2.3.0)| |**`include`**|`{RegExp\|Array}`|`undefined`|Test only `include` files| |**`exclude`**|`{RegExp\|Array}`|`undefined`|Files to `exclude` from testing| -|**`warningsFilter`**|{`Function(source) -> {Boolean}}`|``|Allow to filter uglify warnings (since webpack 2.3.0)| +|**`sourceMap`**|`{Boolean}`|`false`|Use SourceMaps to map error message locations to modules. This slows down the compilation. ⚠️ **`cheap-source-map` options don't work with the plugin!**| +### `test` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ test: /\.js($|\?)/i }) +] +``` + +### `output` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ output: {...options} }) +] +``` ### `mangle` `mangle (boolean|object)` - Passing `true` or an object enables and provides options for UglifyJS name mangling. See [UglifyJS documentation](https://github.com/mishoo/UglifyJS2/tree/v2.x#mangle) for mangle options. Example configuration, this will **not** mangle properties (see below): +**webpack.config.js** ```js -new UglifyJsPlugin({ - mangle: { - // Skip mangling these - except: ['$super', '$', 'exports', 'require'] - } -}) +[ + new UglifyJsPlugin({ + mangle: { + // Skip mangling these + except: ['$super', '$', 'exports', 'require'] + } + }) +] ``` `mangle.props (boolean|object)` - Passing `true` or an object enables and provides options for UglifyJS property mangling - see [UglifyJS documentation](https://github.com/mishoo/UglifyJS2/tree/v2.x#mangleproperties-options) for mangleProperties options. > ℹ️ the UglifyJS docs warn that [you will probably break your source if you use property mangling](https://github.com/mishoo/UglifyJS2/tree/v2.x#mangling-property-names---mangle-props), so if you aren’t sure why you’d need this feature, you most likely shouldn’t be using it! This is **not** enabled by default. -Example configuration, this will mangle both names and properties: +**webpack.config.js** +```js +[ + new UglifyJsPlugin({ + mangle: { + props: true + } + }) +] +``` + +### `compress` +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ compress: true || {...options} }) +] +``` + +### `beautify` + +**webpack.config.js** ```js -new UglifyJsPlugin({ - mangle: { - props: true - } -}) +[ + new UglifyJSPlugin({ beautify: true }) +] +``` + +### `comments` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ comments: true }) +] +``` +```js +[ + new UglifyJSPlugin({ comments: /@license/ }) +] +``` +```js +[ + new UglifyJSPlugin({ comments: (node, comment) => true }) +] ``` ### `extractComments` @@ -102,6 +157,41 @@ The `extractComments` option can be - `banner`: The banner text that points to the extracted file and will be added on top of the original file. will be added to the original file. Can be `false` (no banner), a `string`, or a `function (string) -> string` that will be called with the filename where extracted comments have been stored. Will be wrapped into comment. Default: `/*! For license information please see foo.js.LICENSE */` +### `warningsFilter` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ warningsFilter: (src) => true }) +] +``` + +### `include` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ include: /\/includes/ }) +] +``` + +### `exclude` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ exclude: /\/excludes/ }) +] +``` + +### `sourceMap` + +**webpack.config.js** +```js +[ + new UglifyJSPlugin({ sourceMap: true }) +] +```

Maintainers