前端+后端自动刷新方案——webpack+express

2024-01-31 11:57:50

webpack 是一款强大的前端构建工具，它能够将多种类型的文件打包成一个或多个 JavaScript 文件。webpack-dev-server 是 webpack 的一个扩展包，它提供了一个本地开发服务器，可以将编译后的文件全部保存在内存里，而不会写入到文件目录内。这使得开发者能够快速地对前端代码进行修改和调试，而无需每次都重新编译和刷新页面。

然而，当我们的开发是前端和后端在一个项目里的时候，webpack-dev-server 就无法使用了。这是因为 webpack-dev-server 只能监听前端代码的修改，而无法监听后端代码的修改。因此，当我们修改了后端代码后，需要手动刷新页面才能看到最新的效果。

为了解决这个问题，我们可以使用 webpack 结合 express 实现自动刷新。express 是一个轻量级的 Node.js 框架，它可以用于创建 Web 服务器。通过配置 webpack 和 express，我们可以实现对前端代码和后端代码的监听，并自动刷新页面。

首先，我们需要安装 webpack 和 express。

npm install webpack webpack-dev-middleware webpack-hot-middleware express

然后，我们需要创建一个 webpack 配置文件。

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

在这个 webpack 配置文件中，我们指定了前端代码的入口文件是 src/main.js，输出文件是 dist/bundle.js，并启用了 webpack-dev-server。

接下来，我们需要创建一个 express 服务器。

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const app = express();
const compiler = webpack(require('./webpack.config.js'));

app.use(webpackDevMiddleware(compiler, {
  publicPath: '/dist'
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

在这个 express 服务器中，我们使用了 webpack-dev-middleware 和 webpack-hot-middleware。webpack-dev-middleware 用于将 webpack 编译后的文件提供给客户端，而 webpack-hot-middleware 用于监听前端代码的修改，并自动刷新页面。

现在，我们可以启动 webpack 和 express 服务器。