html-webpack-plugin not working with webpack-dev-server

Question

Webpack, you'll be the death of me.

html-webpack-plugin works fine in production. The 'dist' folder is loaded with my html template and the bundle inserted. Ok cool.

However, webpack-dev-server doesn't do that. It seems to be creating its OWN html page entitled 'Webpack App' and serving that. Where the heck does this come from? I need to be consistent in dev and prod so I can see what's up. I'm merging the different configs using webpack-merge.

• webpack: 4.29.6
• webpack-cli: 3.3.0
• webpack-dev-server: 3.2.1
• html-webpack-loader: 0.0.5,
• html-webpack-plugin: 3.0.7

webpack.common

module.exports = {
    entry: [
        "react-hot-loader/patch",
        resolve("src", "entry.js")
    ],
    output: {
        filename: "bundle.js",
        path: resolve('dist'),
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [resolve(__dirname, 'node_modules')],
                use: [{ loader: 'babel-loader'}]
            },
            {
                test: /\.s(a|c)ss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'sass-loader'
                }]
        }
      ]
    },
    resolve: {
          extensions: [".js", "jsx"],
      alias: {
        actions:     resolve(__dirname, 'src', 'actions'),
        components:  resolve(__dirname, 'src', 'components'),
        lib:         resolve(__dirname, 'src', 'lib'),
        routes:      resolve(__dirname, 'src', 'routes'),
        store:       resolve(__dirname, 'src', 'store'),
        styles:      resolve(__dirname, 'src', 'styles'),
        test:        resolve(__dirname, 'src', 'test'),
      },
      modules: [
        resolve(__dirname, 'node_modules'),
        resolve(__dirname, 'src')
      ]
  },
    plugins: [
       new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       "template": resolve(__dirname, "src", "index.html"),
       "filename": resolve(__dirname, "dist", "index.html"),
       "hash": true,
       "inject": true,
       "compile": true,
       "favicon": false,
       "minify": true,
       "cache": true,
       "showErrors": true,
       "chunks": "all",
       "excludeChunks": [],
       "title": "React Starter",
       "xhtml": true,
       "chunksSortMode": 'none' //fixes bug
     }),
     new CleanWebpackPlugin(['dist'])
    ]
}

webpack.dev

module.exports = merge(common, {
    devtool: "eval-source-map",
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 3000,
        open: true
    }
});

Answer 1

Webpack dev server does not write the files to a dist folder, it serves the bundle from memory. But if you use the contentBase option (which defaults to your current working directory), it will serve those files from disk. The in-memory files are preferred above the contentBase files though.

Answer 2

It looks like things have changed up a bit since I learned webpack a few years ago. It creates its own html file unless you tell it otherwise. So now do this:

npm i -D html-loader

set up these sections like this in your dev config:

devServer: {
    contentBase: './dist'
},

...  

module: {
    rules: [
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
    ]
    ...

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/template.html'
        })
    ]
    ...
}

now your template.html file will work.