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