在现代的前端开发中，webpack 已经成为了必不可少的工具之一。而在 webpack 中，uglifyjs-webpack-plugin 是一款非常流行的代码压缩工具，可以帮助我们将 JavaScript 代码压缩成更小的体积，从而提高网页的加载速度。但是，uglifyjs-webpack-plugin 默认情况下并不支持压缩 ES6 代码，因此在使用时需要进行一些特殊的配置。
本文将介绍如何在 webpack4 中使用 uglifyjs-webpack-plugin 压缩 ES6 代码，具体步骤如下：
步骤一：安装必要的依赖包
在使用 uglifyjs-webpack-plugin 压缩 ES6 代码之前，我们需要安装一些必要的依赖包。具体来说，我们需要安装以下两个包：
- uglifyjs-webpack-plugin：这是一个 webpack 插件，用于压缩 JavaScript 代码。
- babel-loader：这是一个 webpack 插件，用于将 ES6 代码转换成 ES5 代码。
可以通过以下命令来安装这两个依赖包：
npm install uglifyjs-webpack-plugin babel-loader --save-dev
步骤二：配置 webpack.config.js
在安装完必要的依赖包之后，我们需要对 webpack.config.js 进行一些配置。具体来说，我们需要添加以下配置项：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
---
------------- -
---------- -
--- ----------------
-------------- -
--------- -
-- - -------- ---------------
--------- ------
-- ----- --------- ------------
------------- -----
-- ---------------
-------------- -----
-- -----------------------
------------ -----
--
------- -
-- ------
--------- ------
-- -------
--------- ------
--
--
---
--
--
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
-------- ---------------
--
--
--
---
--上述配置项中，optimization.minimizer 数组中包含了一个 UglifyJsPlugin 实例，该实例的 uglifyOptions 中包含了一些配置项，用于压缩 ES6 代码。另外，module.rules 数组中包含了一个 babel-loader 实例，该实例用于将 ES6 代码转换成 ES5 代码。
步骤三：验证压缩效果
在完成了上述配置之后，我们可以通过以下命令来构建打包后的代码：
npm run build
构建完成后，我们可以在 dist 文件夹中找到打包后的代码，然后通过以下命令来验证压缩效果：
uglifyjs [filename].js -c -m
其中，[filename].js 为打包后的代码文件名。如果压缩成功，我们将看到压缩后的代码，代码体积应该比未压缩的代码体积要小得多。
结论
在本文中，我们介绍了如何在 webpack4 中使用 uglifyjs-webpack-plugin 压缩 ES6 代码。具体来说，我们需要安装必要的依赖包，然后对 webpack.config.js 进行一些特殊的配置。通过本文的指导，读者可以在自己的项目中成功地使用 uglifyjs-webpack-plugin 压缩 ES6 代码，从而提高网页的加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67557fcc3af3f99efe4db085