Webpack dev-server - how to serve a static file with updated assets?

Question

So my problem is that I can have webpack serve a directory listing when I go to http://localhost:8080/webpack-dev-server/ . If I modify the dev server path, then it doesn't make any changes to the bundle.

I want a very simple setup. Take everything in app, perform js transforms and then serve it in dist. How does index.html fit it?

I have the following dir structure:

app
  index.js
dist
  bundle.js
index.html
webpack.config.js

And inside of webpack.config I have this:

const path = require('path')

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '.',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
    }
}

I interpret this as "start bundle at index.js, after transforming all js files using the babel-loader put that file called bundle.js into the dist/ . Then on dev server, serve js content from that dist folder and compress."

The disconnect I have is in understanding how index.html plays into this. I have consulted: https://webpack.js.org/configuration/dev-server/#devserver .

I can change the contentBase path to be . and it will not show the directory listing but then it doesn't update the bundle.

tldr:

How can I enable the dev server to point to index.html but serve updated assets?

Finally, figured it out.

const path = require('path')

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    },
    devServer: {
        contentBase: 'dist',
    }
}

I'd love the say that I had an epiphany but I just spammed the options until it worked.

Answer 1

If contentBase is ./dist , then index.html is expected to exist in that directory. It's basically the directory where webpack-dev-server will look for static files (HTML, images, etc).

It doesn't necessarily have to be the same that you're using for the bundle; output.path is (AFAIK) not even used by webpack-dev-server , because it builds and serves the bundle from memory. The only thing required is output.filename and output.publicPath (although I believe the latter is also optional with Webpack v2, but then it will try and determine a public path itself), which are used to determine through with URL the bundle can be requested.