how can I set envrionmental variable with webpack-dev-middleware?

Question

I have a webpack project that serving files with webpack-dev-middleware. here is the server setup.

const webpackMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const webpack = require("webpack");
const webpackConfig = require("../webpack.config.js");
const compiler = webpack(webpackConfig);

//this enables routing
app.use(history());

app.use(
  webpackMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
  })
);
app.use(
  webpackHotMiddleware(compiler, {
    path: "/__webpack_hmr",
    heartbeat: 10 * 1000,
  })
);

i installed "dotenv" package and create "development.env" in the root of the app. this webpack config:

require("dotenv").config({ path: "development.env" });
plugins:[
      new webpack.DefinePlugin({
      "process.env.DB_URL": JSON.stringify(process.env.DB_URL),
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),]

this is development.env:

NODE_ENV=development
DB_URL=mongodb+srv://myURL

only NODE_ENV gets defined. anything else returns undefined

console.log(process.env.DB_URL); // undefined
console.log(process.env.NODE_ENV);// development

I have to do a magic on the server but i couldnt not figure out how.

I used command line option and it worked:

"dev": "  nodemon -r dotenv/config index.js --watch client"

but i still do not understand why it is not working in the first approach. all of other my spa apps worked that way when I use webpack-dev-server.