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
    }
});

Saransh Kataria · Accepted Answer · 2019-03-25 15:29:54Z

2

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.

answered Mar 25, 2019 at 15:29

Saransh Kataria

1,50712 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Coco Over a year ago

So, my question is now to get the html-webpack-plugin working with webpack-dev-server. Does the contentBase option enable that?

Tyler2P · Accepted Answer · 2022-04-23 12:55:54Z

1

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.

edited Apr 23, 2022 at 12:55

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Mar 26, 2019 at 4:09

Coco

1,6505 gold badges25 silver badges46 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related