简介
Webpack 是一个用于 Web 应用程序打包工具，它能够将多个 JavaScript、CSS、HTML 文件打包合并为一个或多个文件，使页面加载速度更快、性能更好。在实际开发中，我们通常需要在不同的环境中进行打包，如开发环境、测试环境、预发布环境和生成环境等，这时就需要为每个环境单独配置 Webpack，并打包适用于该环境的文件。
多环境配置
首先，在项目中新建一个 common 文件夹，用于保存所有环境通用的配置文件。然后，新建一个 webpack.config.js 文件，在文件中引入 Webpack 和其他需要的插件和库，如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- ------------------
---
--- --------------------
-
--上述代码表示了基本的 Webpack 配置，包括入口文件、出口文件和两个插件：HtmlWebpackPlugin 和 CleanWebpackPlugin。其中，HtmlWebpackPlugin 用于自动生成 HTML 文件，并引入打包后的 JS 文件；CleanWebpackPlugin 用于清除打包前的文件。
接下来，我们需要在 common 文件夹中创建一个 utils.js 文件，用于保存实用工具函数，如下所示：
-- -------------------- ---- -------
-------- ----------- -
------ ----- -
---- ------
------ ------------------------
---- -------
------ --------------------------
---- ------
------ -------------------------
---- -------
------ ---------------------
--------
----- --- -------------- ------------ ---------
-
-
-------------- - -
------
--上述代码中的 getUrl 函数用于根据环境返回相应的 API 地址，便于在开发时进行调试和联调。此外，我们还可以在 common 文件夹中创建一个 webpack.dev.js 文件，作为开发环境的配置文件，具体内容如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -------------------------
----- ------ - -------------------------------
----- - ------ - - -------------------
-------------- - ------------- -
----- --------------
-------- --------------------
---------- -
------------ ---------
----- -----
------ -
------- -
------- --------------
------------ -------- - ---
-
-
-
---上述代码中的 devServer 部分用于配置 Webpack Dev Server，其中的 proxy 部分用于代理 AJAX 请求，将以 /api 开头的请求转发到开发环境的 API 地址处。同时，我们还需要在 package.json 文件中添加一个 dev 命令，以启动 Webpack Dev Server，具体内容如下所示：
-- -------------------- ---- -------
-
------- ---------------
---------- --------
---------- -
------ ------------------- ------ -------- ---------------
--
------------------ -
----------------------- ---------
---------------------- ---------
---------- ----------
-------------- ----------
--------------------- ----------
---------------- --------
-
-接下来，我们可以在 common 文件夹中创建多个环境配置文件，如 webpack.test.js、webpack.pre.js 和 webpack.prod.js 等，具体内容根据需求进行配置，最终的项目结构如下所示：
-- -------------------- ---- ------- - --- ------- - --- -------- - --- ----------------- - --- -------------- - --- --------------- - --- -------------- - --- --------------- --- ---- - --- -------- - --- ---------- - --- ---------- --- ----- - --- ---------- --- ------------ --- ---------
使用多环境配置
最后，我们需要在终端中使用命令行参数指定打包的环境，如下所示：
webpack --config webpack.prod.js # 打包生产环境 webpack --config webpack.pre.js # 打包预发布环境 webpack --config webpack.test.js # 打包测试环境 webpack --config webpack.dev.js # 启动开发服务器
如果觉得每次指定都比较麻烦，我们还可以在 package.json 文件中添加四个打包命令，如下所示：
-- -------------------- ---- -------
-
------- ---------------
---------- --------
---------- -
------ ------------------- ------ -------- ----------------
------------- -------- -------- -----------------
------------ -------- -------- ----------------
------------- -------- -------- -----------------
-------- -------- -------- ----------------
--
------------------ -
----------------------- ---------
---------------------- ---------
---------- ----------
-------------- ----------
--------------------- ----------
---------------- --------
-
-上述代码中，我们添加了四个打包命令：build:prod、build:pre、build:test 和 build，以便于快速打包指定环境的文件。
结论
本文介绍了如何使用 Webpack 打包多种环境配置，通过共用一个 common 文件夹，可以方便地修改和维护通用配置文件。同时，我们还介绍了如何使用命令行参数和 package.json 文件中的 scripts 配置打包命令，以便于快速打包指定环境的文件。这些配置可以帮助我们在多种环境中进行开发和测试，为实际项目开发带来便利和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ff7daeedcc8a97c90becc