Webpack Alias

Cuando se implementa los alias se gana mayor control en el código pero se pierde el autocomplete que dispone VisualCode.
Para no perder las dos ventajas se puede crear un archivo denominado jsconfing.json
Con el siguiente código :
{
“compilerOptions”: {
“target”: “es2017”,
“allowSyntheticDefaultImports”: false,
“baseUrl”: “./”,
“paths”: {
"@components/": ["src/components/"],
"@containers/": ["src/containers/"],
"@context/": ["src/context/"],
"@hooks/": ["src/hooks/"],
"@routes/": ["src/routes/"],
"@styles/": ["src/styles/"]
}
},
“exclude”: [“node_modules”, “dist”]
}

Ver más en https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

Webpack Alias

Los Alias nos permiten otorgar nombres paths específicos evitando los paths largos
Para crear un alias debes agregar la siguiente configuración a webpack.

• En webpack.config.js Y webpack.config.dev.js:

  resolve: {
    extensions: ['.js', '.jsx'],
    // añadimos alias
    alias: {
      '@components': path.resolve(__dirname, 'src/components/'),
      '@containers': path.resolve(__dirname, 'src/containers/'),
      '@context': path.resolve(__dirname, 'src/context/'),
      '@hooks': path.resolve(__dirname, 'src/hooks/'),
      '@routes': path.resolve(__dirname, 'src/routes/'),
      '@styles': path.resolve(__dirname, 'src/styles'),
    },
  }, 

En cada importacion de nuestros archivos, componentes, hooks, index, etc; basta con hacer la siguiente referencia.
Ejemplo:

import Home from '@containers/Home';

En lugar de :

import Home from '../containers/Home';

Esto resulta beneficioso porque la ruta puede cambiar mediante nuestra aplicación va creciendo, y solo basta cambiar el alias y no así archivo por archivo.

instale eslint-import-resolver-webpack eslint-import-resolver-alias y seguí su guía en github, pero no me ha funcionado para quitar los syntax errors de eslint

otras cosas que he probado es la guía de este link:

• https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

• .eslintrc

...
  "import/resolver": {
    "webpack": {
      "config": "./webpack/webpack.dev.config.js"
    }
  }

Tengo varios alias, hooks, components, fonts, images, containers, etc, pero tengo un problema con las routes dinamicas al hacer refresh ya no me carga los assets, pasa algo asi

// App.jsx en /src/routes
<Route path="/product/:productId" component={Details} />

// Card.jsx
<Link to={`/products/${productId}`} />

Al dar click en el link y me envia a, por ejemplo.

0.0.0.0:3005/products/27

si me carga las fuentes que tengo desde

0.0.0.0:3005/assets/fonts/myfont.woff 

y todo bien, peeero al dar F5 o introducir manualmente la misma dirección, ya no me carga las funentes porque intenta traerlas desde

0.0.0.0:3005/products/27/assets/fonts/myfont.woff

porque obviamente esa ruta no existe.

¿Alguien me puede ayudar? Llevo muchos dias atorado con ese problema 😦