特瑟-网包-插件
此插件使用 坐标 来修改您的 JavaScript .
(单位:千美元)
webpack@3使用情况 三角-网包-插件-遗留物 软件包
开始
开始,你需要安装 terser-webpack-plugin数字 :
$ npm install terser-webpack-plugin --save-dev
然后将插件添加到您的 webpack 相会. 例如:
网络包装. config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin()],
},
};
跑开 webpack 通过你喜欢的方法.
选项
test
类型 : String|RegExp|Array<String|RegExp>
默认 : /\.m?js(\?.*)?$/i
测试是否匹配文件 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
}),
],
},
};
include
类型 : String|RegExp|Array<String|RegExp>
默认 : undefined
包含的文件 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
include: /\/includes/,
}),
],
},
};
exclude
类型 : String|RegExp|Array<String|RegExp>
默认 : undefined
要排除的文件.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
exclude: /\/excludes/,
}),
],
},
};
chunkFilter
类型 : Function<(chunk) -> boolean>
默认 : () => true
允许过滤哪些块应该被丑化(默认所有块都是被丑化的).
返回时 true 以丑化块, false 否则.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
chunkFilter: (chunk) => {
// Exclude uglification for the `vendor` chunk
if (chunk.name === 'vendor') {
return false;
}
return true;
},
}),
],
},
};
cache
类型 : Boolean|String
默认 : false
启用文件缓存 .
缓存目录的默认路径 : node_modules/.cache/terser-webpack-plugin。 。 。 .
如果你用你自己的
minify请读取minify区域中缓存无效.
Boolean
启用/ 禁用文件缓存 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
}),
],
},
};
String
启用文件缓存并设置缓存目录的路径 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: 'path/to/cache',
}),
],
},
};
cacheKeys
类型 : Function<(defaultCacheKeys, file) -> Object>
默认 : defaultCacheKeys => defaultCacheKeys
允许您覆盖默认缓存密钥 .
默认缓存密钥 :
({
terser: require('terser/package.json').version, // terser version
'terser-webpack-plugin': require('../package.json').version, // plugin version
'terser-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
});
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
cacheKeys: (defaultCacheKeys, file) => {
defaultCacheKeys.myCacheKey = 'myCacheKeyValue';
return defaultCacheKeys;
},
}),
],
},
};
parallel
类型 : Boolean|Number
默认 : false
使用多进程并行运行来提高构建速度.
同时运行的默认次数 : os.cpus().length - 1。 。 。 .
iQQ并行化可以显著地加速你的建设,因此也是 高度建议。 。 。 .
Boolean
启用/ 禁用多进程并行运行 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
}),
],
},
};
Number
启用多进程并行运行并设定并行运行的数量 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parallel: 4,
}),
],
},
};
sourceMap
类型 : Boolean
默认 : false
使用源地图将错误消息位置映射到模块中(这降低了编译速度).
如果你用自己的东西 minify 请读取 minify 用于正确处理源地图的部分.
⚠️
cheap-source-map选项不使用此插件。 。 。 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
}),
],
},
};
minify
类型 : Function
默认 : undefined
允许您推翻默认的最小化函数 . 默认插件使用 坐标 软件包. 可用于使用和测试未发表的版本或叉子.
⚠️ 总是使用
require内部minify函数parallel启用选项。 。 。 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
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 };
},
}),
],
},
};
terserOptions
类型 : Object
默认 : 默认
Terser 微调 选项。 。 。 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
};
extractComments
类型 : Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>|Object
默认 : false
是否将注释提取到单独的文件中,(见 细节) (中文(简体) ).
默认情况下只取出使用 /^\**!|@preserve|@license|@cc_on/i 正则解释条件并删除所剩的注释.
如果原始文件被命名 foo.js,然后将注释存储到 foo.js.LICENSE。 。 。 .
这个 terserOptions.output.comments 选项指定是否保留注释,即有可能保留一些注释(如说明),同时取出其他注释,甚至保留已取出的评论.
Boolean
启用/ 无法提取注释 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: true,
}),
],
},
};
String
摘录 all 或者说 some (使用时 /^\**!|@preserve|@license|@cc_on/i RegExp)的评论.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: 'all',
}),
],
},
};
RegExp
所有符合给定表达式的注释都会被提取到单独的文件中.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: /@extract/i,
}),
],
},
};
Function<(node, comment) -> Boolean>
所有符合给定表达式的注释都会被提取到单独的文件中.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: (astNode, comment) => {
if (/@extract/i.test(comment.value)) {
return true;
}
return false;
},
}),
],
},
};
Object
允许自定义提取注释的条件,指定提取的文件名和横幅.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: {
condition: /^\**!|@preserve|@license|@cc_on/i,
filename: (file) => {
return `${file}.LICENSE`;
},
banner: (licenseFile) => {
return `License information can be found in ${licenseFile}`;
},
},
}),
],
},
};
condition
类型 : Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>
条件 需要什么评论 提取.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: {
condition: 'some',
filename: (file) => {
return `${file}.LICENSE`;
},
banner: (licenseFile) => {
return `License information can be found in ${licenseFile}`;
},
},
}),
],
},
};
filename
类型 : String|Function<(string) -> String>
默认 : ${file}.LICENSE
所取注释将存储的文件 .
默认是附加后缀 .LICENSE 转到原文件名.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: {
condition: /^\**!|@preserve|@license|@cc_on/i,
filename: 'extracted-comments.js',
banner: (licenseFile) => {
return `License information can be found in ${licenseFile}`;
},
},
}),
],
},
};
banner
类型 : Boolean|String|Function<(string) -> String>
默认 : /*! For license information please see ${commentsFile} */
指向取出的文件并会被添加到原始文件上方的横幅文字.
可能会 false (无旗帜),a String,或一个 Function<(string) -> String> 将使用文件名调用已存储已提取的注释.
将发表评论.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
extractComments: {
condition: true,
filename: (file) => {
return `${file}.LICENSE`;
},
banner: (commentsFile) => {
return `My custom banner about license information ${commentsFile}`;
},
},
}),
],
},
};
warningsFilter
类型 : Function<(warning, source) -> Boolean>
默认 : () => true
允许过滤 坐标 警告! 警告你们.
返回时 true 为了保持警告, false 否则.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
warningsFilter: (warning, source) => {
if (/Dropping unreachable code/i.test(warning)) {
return true;
}
if (/filename\.js/i.test(source)) {
return true;
}
return false;
},
}),
],
},
};
实例
缓存和平行
启用缓存和多进程并行运行 .
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
}),
],
},
};
保留注释
摘录所有法律评论(即:. /^\**!|@preserve|@license|@cc_on/i)和保留 /@license/i 评论.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
output: {
comments: /@license/i,
},
},
extractComments: true,
}),
],
},
};
删除注释
如果您避免使用注释构建, 请设定 terser 选项.output.comments (中文(简体) ) 改为 虚假 如此配置 :
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
output: {
comments: false,
},
},
}),
],
},
};
自定义最小化函数
覆盖默认的微缩函数 - 使用 uglify-js 用于微分化.
网络包装. config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
// Uncomment lines below for cache invalidation correctly
// cache: true,
// cacheKeys: (defaultCacheKeys) => {
// delete defaultCacheKeys.terser;
//
// 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('uglify-js').minify(file, uglifyJsOptions);
},
}),
],
},
};
捐款
请花点时间来读一下我们的贡献准则 如果你还没有这样做.