前言
在 Web 开发中，前端工程化是一个必不可少的环节。其中，构建工具 webpack 是非常常用的一种。使用 webpack 可以自动化地完成代码打包、分离、压缩等操作，有很大的作用。然而，对于大部分新手开发者来说，webpack 的配置可能不是一件容易的事情。好在有 npm 包 webpack-configure 可以帮助我们更好地配置 webpack，接下来我们来简单介绍一下这个工具的使用方法。
webpack-configure 简介
webpack-configure 是由 webpack-contrib 组织维护的一个 npm 包。借助 webpack-configure，我们可以更加方便和容易地配置 webpack 工程化工具。
安装
使用 webpack-configure 之前首先需要安装 webpack 和 webpack-cli 两个依赖包。如果你还没有安装过这两个包，可以使用以下命令进行安装：
npm install --save-dev webpack webpack-cli
然后，我们可以安装 webpack-configure：
npm install --save-dev webpack-configure
使用
安装完成后，我们需要新建一个 webpack.config.js 的文件，并配置 webpack-configure。在配置之前，我们需要先导入 webpack-configure 以及其他需要的模块：
const WebpackConfigure = require('webpack-configure');
const path = require('path');接着，定义好一个 webpack-configure 的 new 实例，并配置该实例的属性值，即可实现整个 webpack 的配置：
-- -------------------- ---- -------
----- ------ - --- ------------------
----- ----------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
---
-------------- - --------------配置实例中参数的说明：
name: 该参数会被用在输出文件中，比如bundle.js将改为example.js。entry: 指定打包入口文件。output: 指定输出目录和输出文件名。module.rules: 定义一系列的 loader 规则，用来处理各种类型的文件。
当然，上面的例子只是展示其中一部分配置，具体要根据你的项目需求来配置。更多的参数配置可以在 webpack-configure 的官方文档中查看。
最后，我们需要在 package.json 文件中添加指令 build，以方便快捷地运行 webpack 构建项目：
-- -------------------- ---- -------
-
------- ----------
---------- --------
---------- -
-------- ---------
--
------------------ -
---------- ----------
-------------- ---------
-------------------- --------
-
-现在，我们就可以使用 npm run build 命令来进行 webpack 项目构建了！
总结
本文介绍了 npm 包 webpack-configure 的使用方法，它可以帮助我们更加容易地完成 webpack 的配置。对于新手开发者来说，这是一件非常好的事情，不仅可以减少时间成本，还能够提高工程化的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571181e8991b448d3fc2