1

I've inherited a task to upgrade from Webpack 4 to 5 and have the following custom plugin that works with Webpack 4 but obviously doesn't with Webpack 5 due to the change to using hooks. I am pretty new to all this and am struggling to rewrite the following to work with Webpack 5. Any help would be grateful.

// When webpack compiles, it detects and inserts the host and the port for sockjs to use.
// by default it sets 8080,
// which still doesn't help as our devproxy is only listing to port 80 and 443.
// Our solution is to use webpack's plugin api to inject the desired host during compilation.
// The plugin only applies the host change when the file 'webpack-dev-server/client/index.js' is being compiled.
// It works by redefining the `__resourceQuery` variable that is set by webpack to
// inject the true host
class InjectDevServerHostnamePlugin {
  getQuery(request) {
    const i = request.indexOf('?')
    return request.indexOf('?') < 0 ? '' : request.substr(i)
  }

  apply(compiler) {
    const plugin = this
    compiler.plugin('compilation', (compilation, params) => {
      params.normalModuleFactory.plugin('parser', (parser) => {
        // eslint-disable-next-line func-names
        parser.plugin('expression __resourceQuery', function () {
          if (!this.state.module) return
          if (this.state.module.resource.match('webpack-dev-server/client/index.js')) {
            // eslint-disable-next-line no-console
            console.log('fixing webpack-dev-server location for sock-js')
            this.state.current.addVariable('__resourceQuery', JSON.stringify(plugin.getQuery(this.state.module.resource).replace('http://localhost:4999', 'https://app.companyname.dev')))
          }
          // eslint-disable-next-line consistent-return
          return true
        })
      })
    })
  }
}

module.exports = InjectDevServerHostnamePlugin
treatyman
  • 21
  • 4

1 Answers1

0

I was struggling with exactly this same issue and stumbled across your unanswered post...

You can use Webpack 5's webSocketURL to do exactly what you're after with no extra code/plugins required.

Few examples here:

Hope that helps!

EDIT: as suggested in comments, some inline examples copied/pasted from the docs in case Webpack's documentation links go dead - both examples below can be used in webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws',
    },
  },
};

... or:

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: {
        hostname: '0.0.0.0',
        pathname: '/ws',
        password: 'dev-server',
        port: 8080,
        protocol: 'ws',
        username: 'webpack',
      },
    },
  },
};
ArcticSquirrel
  • 1
  • 1
  • 1
    While your answer might be correct, it would be more usefull if you putted the relevant bits from the links in your answer instead of only putting links to it. This is because links might go dead and make this answer irrelevant – LeeLenalee Jun 08 '22 at 12:59
  • @LeeLenalee Thank you for flagging this. I'll edit my post as you've suggested (again thank you). Just some advice in response to your comment: I'd like to point out, this question was unanswered for over 3 years (last edited 5 months ago). I signed up to specifically to do a good deed and help someone and (if you don't mind me pointing this out) your comment reads a little terse. A thanks for helping/welcome to the community would have been a more tactful/polite start. I hope you understand I give this as genuine, hopefully helpful feedback which I hope you will also appreciate. Many thanks. – ArcticSquirrel Jun 09 '22 at 20:28
  • A thought dawned on me, I do agree code snippets are helpful as you've said, but what if the API changes? Which it does regularly with Webpack. Those code snippets I've added would be wrong, which would be confusing for people later down the line possibly? In my opinion it’s always preferable to go to the source, which in this case is the official webpack documentation. Anyway there's links and code there now so hopefully people will be able to find what they need from what I've put. I hope that all makes sense. Feedback always welcome. Thanks again! – ArcticSquirrel Jun 09 '22 at 21:11