webpack-dev-server does not create initial bundle on start - node.js

Question

I have built a basic babel webpack starter project that i clone from git. The git repository has no dest/output/build folder nor does it have any initial build files. I am knew to webpack so i assumed that when the webpack-dev-server started up it would create a folder (in my case 'build') and do a first time compilation of the source files. Instead i am forced to start the process manually only then after the initial compilation will webpack-dev-server compile the changes.
What am i missing ?
package.json
{
"name": "babel-webpack-starter",
"version": "1.0.0",
"description": "A Babel Webpack Stater Pack for compiling ES2015/ES6, ES2016/ES7 and ES2017 code doen to ES5. This will allow for the use of ES6 modules and later ECMAScript features such as async/await. Also includes a webpack-dev-server to auto load server without having to re-compile.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development",
"start": "webpack-dev-server --output-public-path=/build/ --mode=development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.4",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
webpack.config.js
// Load Node modules
const path = require('path');
// Export modules
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: '/node_modules',
loader: 'babel-loader',
query: {
presets: ['env']
}
}]
}
};

Answer 1

webpack-dev-server will not put your app.bundle.js in your working directory, it will compile your files in-memory.
If you want to access the files, add public path to the output option or which you have done there in the npm start script.
output: {
...
publicPath: '/build/'
}
Now, your files will be available in localhost:<port>/build/app.bundle.js
You can check this site out for more information