Sunday, June 2, 2024
 Popular · Latest · Hot · Upcoming
169
rated 0 times [  170] [ 1]  / answers: 1 / hits: 5157  / 3 Years ago, sat, september 25, 2021, 12:00:00

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?, compress?, 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 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,
},
});

Thank you for your help


More From » webpack

 Answers
11

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




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




[#832] Friday, September 17, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tristab

Total Points: 735
Total Questions: 106
Total Answers: 96

Location: Grenada
Member since Sun, Dec 20, 2020
4 Years ago
tristab questions
;