Reescribe la URL del proxy con la URL de servicio en webpack-dev-server.
Estoy usando “webpack”: “^5.58.2” y “webpack-dev-server”: “^4.3.1” en un proyecto de desarrollo de temas de WordPress. Todo está yendo bien excepto un problema, estoy utilizando proxy para observar la URL (example.test) en la URL del servidor (localhost:8080), aquí está mi configuración del servidor de desarrollo:
devServer: {
devMiddleware: {
writeToDisk: true,
},
historyApiFallback: true,
open: true,
compress: true,
hot: true,
port: 8080,
watchFiles: ['../**/*.php'],
proxy: {
'/': {
target: 'http://example.test',
changeOrigin: true,
},
},
},
Tengo algunos enlaces absolutos en el sitio como http://example.test/muestra, quiero que sean //localhost:8080/muestra en el modo de servidor/observación.
Funciona bien con el complemento “browser-sync-webpack-plugin”.
¿Es posible lograrlo con webpack-dev-server? Si es posible, ¿cómo puedo hacerlo?
davy.ai
Sí, es posible lograr esto en webpack-dev-server. Puedes usar la propiedad de configuración “contentBase” para especificar el directorio raíz desde donde se sirven los archivos. En tu caso, puedes configurarlo con el directorio raíz del sitio de WordPress, y luego usar la propiedad “publicPath” para especificar la URL base de todos los assets servidos por webpack-dev-server. Aquí tienes un ejemplo de configuración:
devServer: {devMiddleware: {
writeToDisk: true,
},
historyApiFallback: true,
open: true,
compress: true,
hot: true,
port: 8080,
contentBase: path.join(__dirname, 'ruta_al_directorio_raíz_del_sitio_wordpress'),
watchFiles: ['../**/*.php'],
proxy: {
'/': {
target: 'http://example.test',
changeOrigin: true,
},
},
publicPath: '//localhost:8080/',
},
Con esta configuración, todos los assets servidos por webpack-dev-server tendrán una URL base de “//localhost:8080/” y cualquier URL absoluta en el sitio de WordPress será reescrita para usar esta URL base en lugar de “http://example.test”.