Heredé una tarea para actualizar de Webpack 4 a 5 y tengo el siguiente complemento personalizado que funciona con Webpack 4 pero obviamente no funciona con Webpack 5 debido al cambio en el uso de ganchos. Soy bastante nuevo en todo esto y estoy luchando por reescribir lo siguiente para que funcione con Webpack 5. Cualquier ayuda sería agradecida.
// 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 = InjectDevServerHostnamePluginEstaba luchando exactamente con este mismo problema y me topé con tu publicación sin respuesta...
Puede usar webSocketURL de Webpack 5 para hacer exactamente lo que busca sin necesidad de código/complementos adicionales.
Algunos ejemplos aquí :
¡Espero que ayude!
EDITAR: como se sugiere en los comentarios, algunos ejemplos en línea copiados/pegados de los documentos en caso de que los enlaces de documentación de Webpack se bloqueen; ambos ejemplos a continuación se pueden usar en webpack.config.js
module.exports = { //... devServer: { client: { webSocketURL: 'ws://0.0.0.0:8080/ws', }, }, };... o:
module.exports = { //... devServer: { client: { webSocketURL: { hostname: '0.0.0.0', pathname: '/ws', password: 'dev-server', port: 8080, protocol: 'ws', username: 'webpack', }, }, }, };