I am trying to write output in file while using Dev-server but I got an error says -
been initialized using a configuration object that does
not match the API schema.
- configuration has an unknown property 'devMiddleware'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
-> Options object as provided by the user.
For typos: please correct them.
For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options
via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
devMiddleware: …
}
}) *
Here is my webpack.config.js:
const path = require('path');
module.exports={
mode:"development",
entry:'./src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'output.js'
},
module: {
rules: [
{ test: /\.css$/,
use:['style-loader','css-loader'] }
],
},
devServer: {
static: {
directory: path.join(__dirname, './dist'),
},
compress: true,
port: 3200
},
devMiddleware: {
writeToDisk: true,
}
}
and here is package.json
{
"name": "new-folder",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --mode development --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"web-cli": "^1.0.0-prealpha",
"webpack": "^5.72.1"
},
"devDependencies": {
"css-loader": "^6.7.1",
"style-loader": "^3.3.1",
"webpack-cli": "^4.9.2",
"webpack-dev-middleware": "^5.3.3",
"webpack-dev-server": "^4.9.0"
}
}
please someone help
Move your middleware configuration inside devServer config object as shown below:
const path = require('path');
module.exports = {
mode:'development',
entry:'./src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'output.js'
},
module: {
rules: [
{
test: /\.css$/,
use:['style-loader','css-loader']
}
],
},
devServer: {
static: {
directory: path.join(__dirname, './dist'),
},
compress: true,
port: 3200,
devMiddleware: {
writeToDisk: true
}
}
}
Also, in theory you should not need to use writeToDisk. You should have a separate build command that generates a production build which would write to disk. For example, you would have following npm script object:
// package.json
{
"scripts": {
"start": "webpack serve",
"build": "webpack"
}
}