在前端开发中，经常需要将 JavaScript 代码压缩以提高网页性能。uglifyjs-webpack-plugin 是一个常用的 webpack 插件，可以帮助我们实现代码压缩。
安装
首先，在项目根目录下使用 npm 安装 uglifyjs-webpack-plugin：
npm install --save-dev uglifyjs-webpack-plugin
配置
接下来，在 webpack 配置文件中引入插件并进行配置：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ---
------------- -
--------- -----
---------- -
--- ----------------
------ -----
--------- -----
---------- -----
---------------- -----
-------------- -
--------- -
------------- -----
--
--
---
--
--
--这里的配置项包括了一些常用的选项，例如缓存、并行处理、生成 source map、提取注释和压缩选项等。其中，compress 选项中的 drop_console: true 表示去除掉所有的 console 日志，可以进一步减小代码体积。
示例
以下是一个使用 uglifyjs-webpack-plugin 的示例，从 src/index.js 向 dist/bundle.js 打包 JavaScript 代码，并生成 sourcemap 文件：
// src/index.js
function add(a, b) {
return a + b;
}
console.log(add(1, 2));-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -------------
------------- -
--------- -----
---------- ---- ------------------
--
--在终端运行 npx webpack 后，可以得到如下的压缩后的代码：
function n(n,o){return n+o}console.log(n(1,2));总结
使用 uglifyjs-webpack-plugin 可以轻松地实现 JavaScript 代码的压缩，并且可以根据需求进行不同的配置。通过这个插件的使用教程，我们可以更好地理解 webpack 插件的工作原理和配置方式，从而更好地掌握前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50717