目录
Webpack 2.2 中文文档
UglifyjsWebpackPlugin
这个插件使用 UglifyJS 去压缩你的JavaScript代码。除了它从 webpack 中解耦之外,它和 webpack 核心插件 (webpack.optimize.UglifyJSPlugin) 是同一个插件。这允许你控制你正在使用的 UglifyJS 的版本。
注意,webpack 在 webpack.optimize.UglifyJsPlugin 下包含相同的插件。对于那些想控制 UglifyJS 版本的开发者来说,这是一个独立的版本。除了这种情况下的安装说明,文档是有效的。
使用
首先,安装这个插件:
yarn add uglifyjs-webpack-plugin --dev
..或者你坚持使用npm,而不是更先进的 Yarn:
npm install uglifyjs-webpack-plugin --save-dev
十分重要! 这个插件这个插件依赖 uglify-js,所以为了使用这个插件,也要安装 uglify-js。然而,目前 (2017/1/25) 可用的 uglify-js npm 包,不支持压缩 ES6 代码。为了支持 ES6,必须提供一个具有压缩 ES6 能力的版本,又称之为 harmony 版本。
如果你的压缩目标是 ES6:
yarn add git://github.com/mishoo/UglifyJS2#harmony --dev
如果你的压缩目标是 ES5:
yarn add uglify-js --dev
然后配置如下:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { entry: {...}, output: {...}, module: {...}, plugins: [ new UglifyJSPlugin() ] };
就是这样了!
选项
这个插件支持 UglifyJS 的功能,如下所述:
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
compress | boolean, object | true | 见 UglifyJS 文档。 |
mangle | boolean, object | true | 见下节. |
beautify | boolean | false | 美化输出。 |
output | 一个提供 UglifyJS OutputStream 选项的对象 | 更底层地访问 UglifyJS 输出。 | |
comments | boolean, RegExp, function(astNode, comment) -> boolean | 默认保存包含 /*! , /**! , @preserve or @license 的注释 |
注释相关的配置 |
sourceMap | boolean | false | 使用 SourceMaps 将错误信息的位置映射到模块。这会减慢编译的速度。 |
test | RegExp, Array |
/.js($|\?)/i |
测试匹配的文件 |
include | RegExp, Array |
只测试包含的文件。 | |
exclude | RegExp, Array |
要从测试中排除的文件。 |
Mangling
mangle.props (boolean|object) – 传递 true 或者一个对象可以启用并提供 UglifyJS mangling 属性选项 – 参考有关 mangleProperties 选项的 UglifyJS 文档。
注意:UglifyJS 警告,如果你使用 mangling 属性,你可能会破坏你的 source,所以如果你不确定你为什么需要这个特性,你最好不要使用它!你可以按如下方式调整行为:
new UglifyJsPlugin({ mangle: { // 跳过这些 except: ['$super', '$', 'exports', 'require'] } })上一篇: SourceMapDevToolPlugin 下一篇: 第三部分:文档-开发