Skip to content
This repository has been archived by the owner on Dec 5, 2019. It is now read-only.

Commit

Permalink
squash: init options example
Browse files Browse the repository at this point in the history
  • Loading branch information
@michael-ciniawsky
michael-ciniawsky committed Jun 29, 2017
1 parent aeb474e commit a5a539c
Showing 1 changed file with 117 additions and 27 deletions.
144 changes: 117 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]


<div align="center">
<!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
<a href="https://github.com/webpack/webpack">
<img width="200" height="200"
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
Expand All @@ -15,27 +15,26 @@
<p>This plugin uses <a href="https://github.com/mishoo/UglifyJS2/tree/v2.x">UglifyJS v2</a> to minify your JavaScript.<p>
</div>


> ℹ️ 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.
<h2 align="center">Install</h2>

```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
```

<h2 align="center">Usage</h2>

**webpack.config.js**
```js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
plugins: [
Expand All @@ -46,48 +45,104 @@ module.exports = {

<h2 align="center">Options</h2>

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<RegExp>}`| <code>/\.js($&#124;\?)/i</code>|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<RegExp>}`| <code>/\.js($&#124;\?)/i</code> |Test to match files against|
|**`warningsFilter`**|`{Function(source) -> {Boolean}}`|``|Allow to filter uglify warnings (since webpack 2.3.0)|
|**`include`**|`{RegExp\|Array<RegExp>}`|`undefined`|Test only `include` files|
|**`exclude`**|`{RegExp\|Array<RegExp>}`|`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($&#124;\?)/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`
Expand All @@ -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 })
]
```

<h2 align="center">Maintainers</h2>

Expand Down

0 comments on commit a5a539c

Please sign in to comment.