在前端开发过程中， webpack 是必不可少的工具。它可以将一些松散的模块打包成较小、更加优化的文件。但是，对于一些比较基础的配置，我们每次都需要手动编写，这无疑会增加开发工作量。为了解决这个问题，有一种叫做 webpack-wrapper-common 的 npm 包，它提供了通用的 webpack 配置，我们可以直接使用，可以大幅度减少编写配置的时间和工作量。
安装
我们可以通过 npm 安装 webpack-wrapper-common：
npm install webpack-wrapper-common --save-dev
使用
安装完 webpack-wrapper-common 后，我们需要在项目中创建一个名为 webpack.config.js 的文件，这个文件中我们只需要引用 webpack-wrapper-common 并且调用它，返回一个 webpack 的配置对象，就可以完成 webpack 的配置了。示例代码如下：
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
----- ------------- - ----------------------
-------- -
------ ----------------- -- ----
--
----------- --------- -- ----------
----------- ---- -- ----- --- --
-------------- ----- -- ------------------ ----
---
-------------- - --------------上述代码中，createWebpackWrapper 是 webpack-wrapper-common 里提供的一个函数，它的参数是一个具有一定结构的对象，其中最重要的是 entries, outputPath, publicPath 和 devServerPort。
entries
entries 是一个对象，它用于定义入口文件。在上面的示例代码中，我们只定义了一个入口文件 index.js，但是你可以定义多个入口文件。
outputPath
outputPath 是一个字符串，它用于设置打包后文件的输出路径。在上面的示例代码中，打包后文件将存放在 dist 目录下。
publicPath
publicPath 是一个字符串，它表示你的静态资源的 URL 前缀。在上述示例中，我们将它设置为 /，这表示所有的静态文件都是通过根路径来访问的。如果你的静态文件是通过一个 CDN 来提供的，那么你需要将它设置为 CDN 的 URL。
devServerPort
devServerPort 是一个整数，它表示 webpack-dev-server 的端口号。在上述示例中，我们将它设置为 3000。
结束语
通过上述教程，我们已经可以使用 webpack-wrapper-common 来优化我们的前端开发流程了。这个 npm 包是非常有用的，它提供了通用的 webpack 配置。通过使用它，可以大幅度减少我们编写配置的时间和工作量，同时也有助于我们更好地了解和使用 webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67716