Webpack-dev-server does not place bundle in dist

Question

I am trying to setup a Webpack configuration for a website I want to build. I want to compile SASS to CSS and place it into the dist folder. When I run npm run build

Answer 1

You've noticed that dist/scripts is not updated.
Like others have said, the webpack-dev-server only keeps it in memory.
But you can take advantage of this.

Add this to your webpack.config.js:

module.exports = {
...
  devServer: {
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js 
    publicPath: '/dist/scripts',
  },
...
};

publicPath: '/dist/scripts'
This is where the magic is.
By default, webpack-dev-server serves the config's output.filename on localhost:8080/ (eg. localhost:8080/bundle.js).
We changed it so that it serves the content on localhost:8080/dist/scripts/ (eg. localhost:8080/dist/scripts/bundle.js).
Now your index.html will be able successfully find .

NOTE: You must visit your index.html via localhost:8080 for this work.
eg. visiting from file://... or a different host/port will not work because it will look for the actual file on your system (which is not updated of course).

---

Alternatively, if you have output: { filename: '/dist/scripts/bundles.js } } instead of output: { filename: 'bundles.js } } then publicPath will be unnecessary.