javascript - 如何使用新的 Webpack devServer 配置?

将项目的 webpack devServer 包从 "webpack-dev-server": "3.11.2" 更新为 "webpack-dev-server ": "4.3.0" 我在开始我的项目时遇到了这个问题:

>> npm run start
> backoffice@1.0.0 start
> webpack serve --config webpack.dev.js

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'writeToDisk'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

变更日志似乎没有更新,我只发现了几个新选项:More info here

如何将这个“旧”配置文件转换为新配置文件?

如果可能的话,我在哪里可以找到新的配置选项?

webpack.dev.js:

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:  path.join(__dirname, './dist'),
    compress: true,
    watchContentBase: true,
    historyApiFallback: true,
    https: false,
    open: 'Firefox Developer Edition',
    stats: {
      colors: true,
    },
    port: 9002,
    proxy: {
      '/api': 'http://localhost:9000'
    },
    writeToDisk: true,
  },
});

谢谢你的帮助

最佳答案

您只需使用不允许的字段。你的开发服务器应该这样写:

devServer: {
    static: {
      directory: path.join(__dirname, './dist')
    },
    compress: true,
    historyApiFallback: true,
    https: false,
    open: true,
    hot: true,
    port: 9002,
    proxy: {
      '/api': 'http://localhost:9000'
    }
    devMiddleware: {
      writeToDisk: true,
    },
  },
  
  // ps: you don't need 'static' for ./dist . DevServer is here to compile and hot reload the js code that is attached to the "root" node. The dist folder is supposed to contain your final build.
  // to use writeToDisk, you'll need to install webpack-dev-middleware
  // npm install webpack-dev-middleware --save-dev

https://stackoverflow.com/questions/69328035/

相关文章:

python - 如何根据最大值将字典中的所有值分配给变量

php - 无法加载 Mac M1 SQL Server SQLSrv OpenSSL 库,请确保已

python - 如何减少由许多条件语句组成的函数?

visual-studio - 缺少 Visual Studio 性能探查器

c++ - C++20 中的新型自动生成构造函数

javascript - 在javascript中找到嵌套数组中的最低值

r - 如果 R 中的其他列中存在值,则用于创建 T/F 列的 dplyr 解决方案

php - Shopware 6 价格收集器/处理器的折扣计算错误

node.js - Docker + WebGL + Headless Chrome 错误 : Pa

c# - 从 C# 中的 Win32_PnPEntity 获取 DEVPKEY_Device_Bus