javascript - How to use the new Webpack devServer configuration? - Stack Overflow

admin管理员组

文章数量:1291090

After updated the webpack devServer package of my project from "webpack-dev-server": "3.11.2" to "webpack-dev-server": "4.3.0" I'm facing this issue when I start my project:

>> npm run start
> [email protected] 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?, press?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

The changelog seems not to be updated and I've found only a couple of new options: More info here

How can I convert this "old" configuration file to the new one?

And if possible, where can I find the new configuration options?

webpack.dev.js:

const {merge} = require('webpack-merge');
const mon = require('./webpackmon.js');
const path = require('path');
module.exports = merge(mon, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase:  path.join(__dirname, './dist'),
    press: true,
    watchContentBase: true,
    historyApiFallback: true,
    https: false,
    open: 'Firefox Developer Edition',
    stats: {
      colors: true,
    },
    port: 9002,
    proxy: {
      '/api': 'http://localhost:9000'
    },
    writeToDisk: true,
  },
});

Thank you for your help

After updated the webpack devServer package of my project from "webpack-dev-server": "3.11.2" to "webpack-dev-server": "4.3.0" I'm facing this issue when I start my project:

>> npm run start
> [email protected] 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?, press?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

The changelog seems not to be updated and I've found only a couple of new options: More info here

How can I convert this "old" configuration file to the new one?

And if possible, where can I find the new configuration options?

webpack.dev.js:

const {merge} = require('webpack-merge');
const mon = require('./webpack.mon.js');
const path = require('path');
module.exports = merge(mon, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase:  path.join(__dirname, './dist'),
    press: true,
    watchContentBase: true,
    historyApiFallback: true,
    https: false,
    open: 'Firefox Developer Edition',
    stats: {
      colors: true,
    },
    port: 9002,
    proxy: {
      '/api': 'http://localhost:9000'
    },
    writeToDisk: true,
  },
});

Thank you for your help

• javascript
• webpack
• webpack-dev-server
• mern

Share Improve this question Follow asked Sep 25, 2021 at 16:26 Yohan W. DunonYohan W. Dunon 52811 gold badge1111 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You simply use fields that are not allowed. Your dev-server should be written as such:

devServer: {
    static: {
      directory: path.join(__dirname, './dist')
    },
    press: 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 pile 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

本文标签： javascriptHow to use the new Webpack devServer configurationStack Overflow