在前端开发中，webpack 是一个常用的构建工具。而 unminified-webpack-plugin 是一个非常实用的 webpack 插件，可以让我们在构建时自动生成未压缩的代码，方便开发中对代码的查看和调试。本文将详细介绍如何使用此 npm 包。
安装
在使用之前，我们需要先安装 unminified-webpack-plugin。可以通过 npm 进行安装：
npm install unminified-webpack-plugin --save-dev
使用
在 webpack 中使用 unminified-webpack-plugin 很简单，我们只需要在配置文件中进行相应的配置即可。下面是一个示例配置：
-- -------------------- ---- -------
----- ----------------------- - -------------------------------------
-------------- - -
----- -------------
------ ------
------- -
----- ------
--------- ------
--
---------
--- --------------------------
--
--通过以上配置，我们就可以在构建时自动生成未压缩的代码了。在 dist 目录中，会生成一个同名的未压缩文件，方便我们在查看和调试代码时进行参考。
配置项
unminified-webpack-plugin 支持以下配置项：
sourceMap：是否生成 sourcemap 文件，默认值为 true。test：匹配需要生成未压缩文件的文件名，默认值为 /.js$/。
例如，我们可以将配置修改为：
-- -------------------- ---- -------
----- ----------------------- - -------------------------------------
-------------- - -
----- -------------
------ ------
------- -
----- ------
--------- ------
--
---------
--- -------------------------
---------- ------
----- ---------
---
--
--这样我们就可以将 sourceMap 关闭，并且只生成 .js 文件的未压缩版本。
指导意义
使用 unminified-webpack-plugin 可以为我们开发中的调试和排查问题提供很大的帮助。但是需要注意的是，在正式部署的时候，我们需要确保压缩版本的代码已经通过了测试，并且未压缩的代码没有被部署上线，避免潜在的安全漏洞。
示例代码
我们可以通过以下示例进行测试：
-- -------------------- ---- -------
----- ----------------------- - -------------------------------------
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
---------
--- -------------------------
---------- ------
----- --------
---
--
-------- -------------
--在编写完 index.js 文件后，我们可以运行以下命令进行构建：
npx webpack
通过以上命令，我们可以在 dist 文件夹中看到生成的未压缩文件 bundle.js，方便我们进行代码查看和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61805