Example doesn't work

[empeje]

dependencies {
    "@glints/hapi-webpack-dev-server-plugin": "^1.0.4",
    "webpack": "^4.38.0",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0"
}

import WebpackDevServerPlugin from '@glints/hapi-webpack-dev-server-plugin';
import webpack from 'webpack';
import webpackConfig from '../webpack.config';

  if (FAMEWEKA_ENV === 'development') {
    console.log('this code is executed');
    const compiler = webpack(webpackConfig);

    await hapi.register({
      plugin: WebpackDevServerPlugin,
      options: {
        compiler,
        devMiddlewareOptions: {
          // Define options for webpack-dev-middleware
          publicPath: webpackConfig.output.publicPath,
          stats: {
            modules: false
          }
        }
      }
    });
  }

I'm trying to use this on my project fameweka, but it is not working? how you guys do it in Glints?

[empeje]

I managed to get it working by doing

import * as WebpackDevServerPlugin from '@glints/hapi-webpack-dev-server-plugin';
import webpack from 'webpack';
import webpackConfig from '../webpack.config';

  if (FAMEWEKA_ENV === 'development') {
    const compiler = webpack(webpackConfig);

    await hapi.register({
      plugin: WebpackDevServerPlugin.WebpackDevServerPlugin,
      options: {
        compiler,
        devMiddlewareOptions: {
          // Define options for webpack-dev-middleware
          publicPath: webpackConfig.output.publicPath,
          stats: {
            modules: false
          }
        }
      }
    });
  }

However, I can't managed to make work with hot reload.

[empeje]

I also can't access bundle file once it served via hapi-webpack-dev-server-plugin in development

[yjwong]

The package exports only a named export WebpackDevServerPlugin (it's not default-exported), so either one of these importing methods work:

// Reference with WebpackDevServerPlugin.WebpackDevServerPlugin
import * as WebpackDevServerPlugin from '@glints/hapi-webpack-dev-server-plugin';

// Reference with WebpackDevServerPlugin directly
import { WebpackDevServerPlugin } from '@glints/hapi-webpack-dev-server-plugin';

For hot module reloading, you need to have webpack-hot-middleware module installed, and include it as one of the entry items in your Webpack config, something like:

const compiler = webpack({
  // ...
  entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true',
    '../app/index',
    // Other entry points here...
  ],
  // ...
});

When you say you can't access the bundle file, is there any error message displayed from the Webpack compilation process? What is the URL used to access the bundle?

[empeje]

Yes I got it working now @yjwong , can I create a PR to update the Readme to talk about this?

[yjwong]

Sure! That would be really appreciated :)