webpack-dev-server with reload does not work?

[tugend]

Hi.

Nice plugin. Only thing is, I want to make webpack-dev-server reload when I change the hbs files. Sadly, I can only get the reload to work when I change the app.js file.

Can you confirm it should be possible? My current config is really simple, and basically there is just no relation between the app.js and the hbs files.

I can make it work using a wrapped watch call npx watch "npm run build" "src" but feel that is a bit of a sidestep.

var path = require("path");
var HandlebarsPlugin = require("handlebars-webpack-plugin");

var webpackConfig = {
  mode: "development",
  entry: path.join(process.cwd(), "src", "app.js"),
  output: { path: path.join(process.cwd(), "build") },
  plugins: [
    new HandlebarsPlugin({
      entry: path.join(process.cwd(), "src", "pages", "*.hbs"),
      output: path.join(process.cwd(), "build", "[name].html"),
      partials: [ path.join(process.cwd(), "src", "partials", "*.hbs") ],
      data: {},
    }),
  ]
};

module.exports = webpackConfig;

[sagold]

Hi.

The plugin does watch any referenced hbs-files. Did you try to use a single entry-file only? Which dev-server-version are you using?

[tugend]

Thank you for the answer. I'm sad to say I went with a different solution and cannot replicate the problem. I therefore close the issue, noting you have confirmed it should be possible - and assuming the was a bug in my setup.

Cheers!

[TheReincarnator]

Hello @sagold , thank you for this nice plugin. Unfortunatelly, I ran into the same problem as @tugend.

This is a minimal setup that replicates the problem:

webpack.config.js:

const path = require("path");

const HandlebarsPlugin = require("handlebars-webpack-plugin");

module.exports = {
    plugins: [
        new HandlebarsPlugin({
            entry: path.join(process.cwd(), "src", "*.html"),
            output: path.join(process.cwd(), "dist", "[name].html")
        })
    ],

    devServer: {
        contentBase: "./dist",
        open: true,
        overlay: true,
        port: 80
    }
};

package.json:

{
    "name": "example",
    "version": "1.0.0",
    "private": true,
    "description": "example",
    "scripts": {
        "dev": "webpack-dev-server --open"
    },
    "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "babel-loader": "^8.0.5",
        "file-loader": "^3.0.1",
        "handlebars": "^4.0.5",
        "handlebars-loader": "^1.7.1",
        "handlebars-webpack-plugin": "1.5.0",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1"
    }
}

src/index.html:

<p>I am a file</p>

src/index.js:

console.log('Hello world');

Steps to reproduce:

• Run npm i and npm run dev
• Browser opens with the contents of index.html
• Change something
• Change does not reflect to browser until next webserver start.

[TheReincarnator]

I just found the reason for this bug, and a solution. The problem only occurs on Windows, and the reason is a path separator mixup. I will provide a PR to fix this.

[TheReincarnator]

... and here it is: https://github.com/sagold/handlebars-webpack-plugin/pull/48