简介：babili-webpack-plugin 是一个 webpack 插件，它使用了比 webpack 自带的 uglifyJS 更先进的算法来压缩和优化 JavaScript 代码。babili-webpack-plugin 基于 Babel 6 自带的 babel-minify 库实现。它可以大幅度优化 JavaScript 代码，减小代码体积并提高代码运行效率。
在本篇教程中，我们将会学习如何使用 babili-webpack-plugin 来压缩 JavaScript 代码，以及如何在项目中配置和使用它。
安装
要使用 babili-webpack-plugin，我们首先需要安装它：
npm install babili-webpack-plugin --save-dev
注意：该插件只能在 Node.js v6 及以上版本中使用。
配置
接下来，我们需要在项目的 webpack 配置文件中引入和使用 babili-webpack-plugin。以下是一个基本的 webpack 配置文件示例：
-- -------------------- ---- ------- ----- ------------ - --------------------------------- -------------- - - ------ ------------- ------- - --------- ----------- -- -------- - --- -------------- - --展开代码
其中，我们在 plugins 数组中创建了一个新的 BabiliPlugin 实例。这样，webpack 就会在构建中使用指定的插件来压缩 JavaScript 代码。
使用
当我们将 babili-webpack-plugin 添加到 webpack 配置文件中并运行构建时，该插件会开始优化我们的 JavaScript 代码。
我们可以在命令行中通过如下方式运行 webpack 构建命令：
webpack --mode=production
这里使用了 webpack v4 中的新特性之一，即 mode 选项。通过指定 mode 为 production，webpack 会自动使用很多内置的优化，例如压缩 JavaScript 代码等。
当构建完成后，我们可以检查输出文件的大小来确认 babili-webpack-plugin 是否成功优化了我们的代码。我们可以通过以下命令来查看输出文件的大小：
ls -lh ./dist/bundle.js
这里的 ./dist/bundle.js 就是我们的输出文件路径。我们将会看到该文件体积减小了很多，这意味着 babili-webpack-plugin 成功地优化了我们的代码。
自定义配置
我们还可以通过传递选项来自定义 babili-webpack-plugin 的行为。以下是一些常见的选项：
comments：当值为 false 时，会删除所有注释。experimental：当值为 true 时，启用优化实验功能。mangle：当值为 false 时，禁用改变变量名等操作。
我们可以将这些选项传递给 BabiliPlugin 的构造函数，如下所示：
-- -------------------- ---- ------- ----- ------------ - --------------------------------- -------------- - - ------ ------------- ------- - --------- ----------- -- -------- - --- -------------- --------- ------ ------------- ----- ------- ----- -- - --展开代码
结论
babili-webpack-plugin 是一个非常强大的工具，它可以帮助我们优化 JavaScript 代码、减小代码体积并提高代码运行效率。通过了解如何安装、配置和使用该插件，我们可以轻松地在项目中使用该工具来优化我们的 JavaScript 代码。
示例代码：https://github.com/EllieQiu/babili-webpack-plugin-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64096
