Webpack devServer no output files generated?

Question

I'm learning Webpack and trying the plugin webpack-dev-server. I'm learning by trying to change its settings in webpack.config.js.

Before change:

output: {
  path: path.resolve(__dirname, 'dist')
},
devServer: {
  contentBase: path.join(__dirname, 'dist')
  // ...
}

After change:

output: {
  path: path.resolve(__dirname, '/dist/')
},
devServer: {
  contentBase: path.join(__dirname, '/dist/'),
  open: true,
  // ...
}

The result:

• The dist/ folder was not generated in my project folder.
• While the browser was still opened and serving the page with .js being applied.

So it seems like the dist folder is generated elsewhere? I'm also considering that it's because of my wrong settings of output { path: ... } or devServer: { contentBase: ... }.

btw, would html-webpack-plugin generate the output in a temporary folder if these two path settings were wrong?

Answer 1

Question - Answer:

So it seems like the dist folder is generated elsewhere? [...]

Yes. From one GitHub thread:

Please note that webpack-dev-server runs in memory by design. [...]

---

I'm also considering that it's because of my wrong settings of output { path: ... } or devServer: { contentBase: ... }.

Yes. The path: path.resolve(__dirname, '/dist/') by the node.js docs will resolve to just /dist. Since it's at root directory you will be asked for the write-permission to do so.

But, since you're using webpack-dev-server, by default it will not generate files to the folder specified in your output - path.

Important point for people new to node.js:

Prefer path.join than path.resolve.

Comparison:

path.join(__dirname, '/dist')
/* output: `/Users/path-to-your-project/dist`. */

path.resolve(__dirname, '/dist')
/* output: `/dist`. */

---

Here are some screenshots for trying make it clear:

package.json:

{
  "name": "webpack_practice",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack",
    "build:watch": "./node_modules/.bin/webpack --watch",
    "server": "./node_modules/.bin/webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

Test 1: npm run build

Test 2: npm run server