入門
如果你使用的是 webpack v5 或以上版本，你不需要安裝這個(gè)插件捂人。webpack v5 自帶最新的 terser-webpack-plugin。如果使用 webpack v4趟章，則必須安裝 terser-webpack-plugin v4 的版本慨默。
首先，你需要安裝 terser-webpack-plugin：
$ npm install terser-webpack-plugin --save-dev
然后將插件添加到你的 webpack 配置文件中耻瑟，直接在optimization中配置旨指。例如：
webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
test: /\.js(\?.*)?$/i, //匹配參與壓縮的文件
parallel: true, //使用多進(jìn)程并發(fā)運(yùn)行
terserOptions: { //Terser 壓縮配置
output:{comments: false}
},
extractComments: true, //將注釋剝離到單獨(dú)的文件中
compress: {//console刪除
pure_funcs: ["console.log"]
}
})],
},
};
選項(xiàng)
test
類型： String|RegExp|Array<String|RegExp> 默認(rèn)值：/\.m?js(\?.*)?$/i
用來匹配需要壓縮的文件。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
}),
],
},
};
include
類型： String|RegExp|Array<String|RegExp> 默認(rèn)值： undefined
匹配參與壓縮的文件喳整。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: /\/includes/,
}),
],
},
};
exclude
類型： String|RegExp|Array<String|RegExp> 默認(rèn)值： undefined
匹配不需要壓縮的文件谆构。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
exclude: /\/excludes/,
}),
],
},
};
parallel
類型： Boolean|Number 默認(rèn)值： true
使用多進(jìn)程并發(fā)運(yùn)行以提高構(gòu)建速度。 并發(fā)運(yùn)行的默認(rèn)數(shù)量： os.cpus().length - 1 框都。
并發(fā)運(yùn)行可以顯著提高構(gòu)建速度搬素，因此強(qiáng)烈建議添加此配置 。
如果你使用 Circle CI 或任何其他不提供 CPU 實(shí)際可用數(shù)量的環(huán)境瞬项，則需要顯式設(shè)置 CPU 數(shù)量蔗蹋，以避免
Error: Call retries were exceeded（請(qǐng)參閱 #143，#202 ）囱淋。
Boolean
啟用/禁用多進(jìn)程并發(fā)運(yùn)行功能猪杭。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
}),
],
},
};
Number
啟用多進(jìn)程并發(fā)運(yùn)行并設(shè)置并發(fā)運(yùn)行次數(shù)。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: 4,
}),
],
},
};
minify
類型： Function 默認(rèn)值： undefined
允許你自定義壓縮函數(shù)妥衣。 默認(rèn)情況下皂吮，插件使用 terser 庫(kù)。 對(duì)于使用和測(cè)試未發(fā)布的版本或 fork 的代碼很幫助税手。
?? 啟用
parallel選項(xiàng)時(shí)蜂筹，在minify函數(shù)內(nèi)部只能使用require。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
myCustomOption: true,
},
// Can be async
minify: (file, sourceMap, minimizerOptions) => {
// The `minimizerOptions` option contains option from the `terserOptions` option
// You can use `minimizerOptions.myCustomOption`
const extractedComments = [];
// Custom logic for extract comments
const { map, code } = require("uglify-module") // Or require('./path/to/uglify-module')
.minify(file, {
/* Your options for minification */
});
return { map, code, extractedComments };
},
}),
],
},
};
terserOptions
類型： Object 默認(rèn)值： 默認(rèn)
Terser 壓縮配置 芦倒。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
// Deprecated
output: null,
format: 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 默認(rèn)值： true
是否將注釋剝離到單獨(dú)的文件中（請(qǐng)參閱詳細(xì)信息）艺挪。 默認(rèn)情況下，僅剝離 /^\**!|@preserve|@license|@cc_on/i 正則表達(dá)式匹配的注釋兵扬，其余注釋會(huì)刪除麻裳。 如果原始文件名為 foo.js 口蝠，則注釋將存儲(chǔ)到 foo.js.LICENSE.txt 。 terserOptions.format.comments 選項(xiàng)指定是否保留注釋津坑，即可以在剝離其他注釋時(shí)保留一些注釋妙蔗，甚至保留已剝離的注釋。
Boolean
啟用/禁用剝離注釋功能疆瑰。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: true,
}),
],
},
};
String
剝離 all 或 some （使用 /^\**!|@preserve|@license|@cc_on/i 正則表達(dá)式進(jìn)行匹配）注釋眉反。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: "all",
}),
],
},
};
RegExp
與指定表達(dá)式匹配的所有注釋將會(huì)被剝離到單獨(dú)的文件中。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: /@extract/i,
}),
],
},
};
Function<(node, comment) -> Boolean> {＃functionnode-comment --- boolean} {#functionnode-comment---boolean-＃functionnode-comment-----boolean}
與指定表達(dá)式匹配的所有注釋將會(huì)被剝離到單獨(dú)的文件中穆役。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: (astNode, comment) => {
if (/@extract/i.test(comment.value)) {
return true;
}
return false;
},
}),
],
},
};
Object
允許自定義剝離注釋的條件寸五，指定剝離的文件名和標(biāo)題。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: {
condition: /^\**!|@preserve|@license|@cc_on/i,
filename: (fileData) => {
// The "fileData" argument contains object with "filename", "basename", "query" and "hash"
return `${fileData.filename}.LICENSE.txt${fileData.query}`;
},
banner: (licenseFile) => {
return `License information can be found in ${licenseFile}`;
},
},
}),
],
},
};
condition
類型： Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>
自定義需要?jiǎng)冸x的注釋孵睬。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: {
condition: "some",
filename: (fileData) => {
// The "fileData" argument contains object with "filename", "basename", "query" and "hash"
return `${fileData.filename}.LICENSE.txt${fileData.query}`;
},
banner: (licenseFile) => {
return `License information can be found in ${licenseFile}`;
},
},
}),
],
},
};
filename
類型： String|Function<(string) -> String> 默認(rèn)值： [file].LICENSE.txt [query]
可用的占位符： [file] 播歼， [query] 和 [filebase] （webpack 5 使用 [base] ）。
剝離出來的注釋將被存儲(chǔ)到的文件的文件名掰读。 默認(rèn)是將后綴 .LICENSE.txt 附加到原始文件名。
??我們強(qiáng)烈建議使用
txt擴(kuò)展名叭莫。
使用 js / cjs / mjs 擴(kuò)展名可能會(huì)與現(xiàn)有資源文件沖突蹈集，從而導(dǎo)致代碼運(yùn)行出錯(cuò)。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
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> 默認(rèn)值： /*! For license information please see ${commentsFile} */
指向剝離文件的標(biāo)語(yǔ)文本將被添加到原始文件的頂部雇初。 可以為 false （無標(biāo)題）拢肆， String 或一個(gè)函數(shù)：Function<(string) -> String> ，該函數(shù)將被使用存儲(chǔ)剝離的注釋的文件名來調(diào)用靖诗。 標(biāo)語(yǔ)內(nèi)容將被合并到注釋中郭怪。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: {
condition: true,
filename: (fileData) => {
// The "fileData" argument contains object with "filename", "basename", "query" and "hash"
return `${fileData.filename}.LICENSE.txt${fileData.query}`;
},
banner: (commentsFile) => {
return `My custom banner about license information ${commentsFile}`;
},
},
}),
],
},
};
示例
保留注釋
剝離所有有效的注釋（即 /^\**!|@preserve|@license|@cc_on/i ）并保留 /@license/i 注釋。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
format: {
comments: /@license/i,
},
},
extractComments: true,
}),
],
},
};
刪除注釋
如果要在構(gòu)建時(shí)去除注釋刊橘，請(qǐng)使用以下配置：
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
format: {
comments: false,
},
},
extractComments: false,
}),
],
},
};
自定義壓縮函數(shù)
覆蓋默認(rèn)的 minify 函數(shù) - 使用 uglify-js 進(jìn)行壓縮鄙才。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
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);
},
}),
],
},
};
