如何使用 express 和 webpack-dev-middleware 搭建开发服务器

在开发前端项目时，我们一般会选用 webpack-dev-server 作为开发服务器，例如：

// webpack.config.js
module.exports = {
  // ...
  devServer: {
     static: './dist',
  },
}

// package.json
{
  "scripts": {
    "serve": "webpack serve --open",
    "build": "webpack"
  },
}

但实际上 Webpack 还提供了 webpack-dev-middleware，可以作为单独的 package 使用。这就意味着可以使用自定义的 Server 作为开发服务器。下面我们先安装 express 和 webpack-dev-middleware：

$ yarn add express webpack-dev-middleware -D

下面需要调整一下 Webpack 配置，确保 middleware 能够正确启用：

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    // 增加这个配置
    publicPath: '/',
  },
};

然后创建 server.js，添加如下内容：

// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');

const app = express();
const compiler = webpack(config);

// 告知 express 使用 webpack-dev-middleware，
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

// 将文件 serve 到 port 3000。
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

在 package.json 中添加一个 npm script：

// package.json
{
  "scripts": {
    "start": "node server.js",
    "serve": "webpack serve --open",
    "build": "webpack"
  },
}

然后运行下面的命令就能启动服务：

$ yarn start