在当今的 Web 开发领域中，前端框架和库层出不穷。其中，Express.js 是一款流行的 Node.js Web 框架，而 Webpack 则是一款广泛使用的模块打包工具。本文将详细介绍如何使用 Express.js 和 Webpack 构建现代前端应用。
准备工作
在开始构建前端应用之前，我们需要为我们的项目做一些准备工作。首先，需要通过 npm 安装 Express.js 和 Webpack。
--- ------- ------- ------- ------
接下来，我们需要在项目文件夹中创建一个 package.json 文件。在终端中输入以下命令即可。
--- ----
同时，我们还需要在 package.json 文件中添加以下脚本。
---------- - -------- ----- ----------- ------ -------------------- -
这将允许我们使用 npm run start 命令启动 Express 服务器，使用 npm run dev 命令启动 Webpack 开发服务器。
创建 Express 服务器
接下来，我们将创建一个 Express 服务器。在项目文件夹中创建一个名为 server.js 的文件，并添加以下代码。
----- ------- - ------------------- ----- --- - ---------- -- ------- ---------------------------------- -- ------ --- -- ------------ ----- ---- -- - ---------------------- - --------------- --- -- ----- ---------------- -- -- - ----------------------- ---
这个服务器代码只是简单地设置了一个静态文件夹，处理了根路径的 GET 请求，并启动了服务器。现在，我们需要创建一个 public 文件夹，并在其中创建一个名为 index.html 的文件，作为我们的主页。
使用 Webpack 打包 JavaScript
我们已经开始创建一个简单的 Express 服务器，但我们还没有编写任何 JavaScript 代码。现在，我们需要使用 Webpack 来打包我们的 JavaScript 代码。
在项目文件夹中创建一个名为 src 的文件夹，并在其中创建一个名为 index.js 的文件。然后，使用以下命令安装必要的依赖项。
--- ------- ------ ------
我们将使用 lodash 库来进行演示。打开 src/index.js 文件，并添加以下代码。
------ - ---- --------- ---------------------------- --------- - ----
现在，我们需要配置 webpack。在项目文件夹中创建一个名为 webpack.config.js 的文件，并添加以下代码。
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- ---------
-
--这个配置文件告诉 Webpack，我们的入口文件是 src/index.js，打包后的文件名为 bundle.js，并将其输出到 public 文件夹中。
现在，我们可以运行 npm run dev 命令，在浏览器中打开 localhost:8080，就可以看到我们的应用了。
添加 CSS 和图片
在我们的应用中，我们不仅可以使用 JavaScript，还可以使用 CSS 和图片。此时，我们可以使用 Webpack 的 style-loader 和 file-loader 插件来打包这些资源。
首先，我们需要安装必要的依赖项。
--- ------- ---------- ------------ ----------- ---------- ----------
然后，我们需要在 webpack.config.js 文件中添加以下代码。
-------------- - -
-- ---
------- -
------ -
-- -- ---
-
----- ---------
---- ---------------- -------------
--
-- ----
-
----- -----------------------
---- --------------
--
-- ------
-
----- ------------------------------
---- ---------------
-
-
-
--现在，我们可以在我们的 JavaScript 文件中使用 require 来引入 CSS 和图片了。
-- -- --- -- ----------------------- -- ------ --- -------- - -----------------------
结论
通过本文的介绍，我们已经了解了如何使用 Express.js 和 Webpack 创建现代的前端应用。我们从创建 Express 服务器开始，然后使用 Webpack 打包我们的 JavaScript、CSS 和图片。希望这篇文章能对前端开发的同学们有所帮助。
示例代码
完整的示例代码已经上传到 Github 上，欢迎下载并尝试运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672dec9feedcc8a97c86642c