webpack-dev-server从3.x升级到4.x后旧配置如何适配？

配置调整方案 #

v4版本将原v3的多个顶层配置项归类到了devMiddleware、static等子节点下，你给出的原有配置需要做如下修改：

const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    // 原contentBase、watchContentBase整合到static配置下
    static: {
      directory: path.join(__dirname, './dist'),
      watch: true,
    },
    // 原writeToDisk、stats整合到devMiddleware配置下
    devMiddleware: {
      writeToDisk: true,
      stats: {
        colors: true,
      }
    },
    // 以下配置保持不变
    compress: true,
    historyApiFallback: true,
    https: false,
    open: 'Firefox Developer Edition',
    port: 9002,
    proxy: {
      '/api': 'http://localhost:9000'
    },
  },
});

调整说明：

• contentBase替换为static.directory，用于指定静态资源服务目录
• watchContentBase替换为static.watch，开启后静态资源变更会触发页面自动刷新
• writeToDisk移动到devMiddleware节点下，控制是否将构建产物写入本地磁盘
• stats移动到devMiddleware节点下，用于配置构建日志的输出格式

完整配置查询方式 #

你可以直接查看webpack官方文档中webpack-dev-server对应v4版本的板块，所有配置项的定义、可用值、使用示例都有完整说明；也可以查看npm包webpack-dev-server的官方README文档，里面有同步的版本适配指引。 #

内容的提问来源于stack exchange，提问作者Yoh