用现代工具来打造多页应用架构

2024-02-07 08:20:13

随着现代项目的复杂度不断增加，在多个页面上构建网站或应用程序已成为一种常见需求。多页应用（MPA）架构非常适合满足这种需求，因为它们允许您为每个页面创建单独的代码块，从而提高应用程序的可维护性和可扩展性。

在本文中，我们将向您展示如何使用 webpack4、ejs 和 express 来构建一个 MPA 项目架构。

前言：webpack4、ejs 和 express

webpack4 ：一个现代的打包工具，可以将各种类型的资源（如 JavaScript、CSS 和图像）捆绑到一个或多个文件中。
ejs ：一个简单的模板引擎，可以将模板和数据结合起来生成 HTML 页面。
express ：一个流行的 Node.js 框架，可以用来构建 Web 应用程序。

项目架构

我们的项目架构如下：

- client
  - src
    - app.js
    - index.ejs
    - about.ejs
    - contact.ejs
  - dist
    - app.bundle.js
    - index.html
    - about.html
    - contact.html
- server.js

client 目录包含客户端代码。
src 目录包含源代码。
dist 目录包含构建后的代码。
server.js 是服务器端代码。

配置 webpack4

首先，我们需要配置 webpack4。为此，请在项目根目录中创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: './client/src/app.js',
  output: {
    path: path.resolve(__dirname, 'client/dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader'
      }
    ]
  }
};

配置 express

接下来，我们需要配置 express。为此，请在项目根目录中创建一个名为 server.js 的文件，并添加以下内容：

const express = require('express');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'client/src'));

app.get('/', (req, res) => {
  res.render('index');
});

app.get('/about', (req, res) => {
  res.render('about');
});

app.get('/contact', (req, res) => {
  res.render('contact');
});

app.listen(3000);