Estoy trabajando en un proyecto de React en el que los estilos y las imágenes los proporciona un tema externo, ya que la aplicación React se integrará en un portlet dentro de esta página web. Como tal, las imágenes dentro de la aplicación React son relativas y apuntan a un directorio al que no tengo acceso durante el desarrollo.
<img src="/relative/external/theme/images/themeImg.png" />
Como no tengo acceso a él, cuando desarrollo localmente no puedo ver ninguna de esas imágenes. Sin embargo, para fines de desarrollo, tengo esos archivos de imagen localmente en mi directorio local src/js/images/ .
Estamos usando Webpack 4.
Aquí dejo parte de la configuración actual (no puedo publicar todo):
{ name: 'main', mode: 'development', devtool: 'source-map', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, entry: { main: './src/main/js/main.js', }, module: { rules: [ { test: /\.(js|jsx)$/, resolve: { extensions: ['.js', '.jsx'] }, exclude: /node_modules/, loaders: ['babel-loader'], }, { test: /\.svg$/, use: [ { loader: 'svg-url-loader', }, ], }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'sass-loader', }, ], }, ], }, devServer: { contentBase: path.join(__dirname, 'dist'), port: 9000, historyApiFallback: true, headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS', 'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization', }, } } ¿Hay alguna manera de decirle a Webpack que haga público mi directorio src/js/images/ , de modo que sea accesible mediante los atributos HTML src y redirija todas las llamadas relative/external/theme/images a ese directorio público images/ en desarrollo? (sin meterse con publicPath , por lo que todo el paquete todavía se sirve desde el mismo lugar)?
No puedo importar imágenes y usarlas en el src ya que no puedo importarlas desde un directorio al que no tengo acceso, por eso toda la carpeta debe ser pública y estar disponible para cargar las imágenes desde ella.