No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

6 D铆as
13 Hrs
35 Min
8 Seg

Webpack Alias

11/22
Recursos

Aportes 4

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 :
{
鈥渃ompilerOptions鈥: {
鈥渢arget鈥: 鈥渆s2017鈥,
鈥渁llowSyntheticDefaultImports鈥: false,
鈥渂aseUrl鈥: 鈥./鈥,
鈥減aths鈥: {
"@components/": ["src/components/"],
"@containers/": ["src/containers/"],
"@context/": ["src/context/"],
"@hooks/": ["src/hooks/"],
"@routes/": ["src/routes/"],
"@styles/": ["src/styles/"]
}
},
鈥渆xclude鈥: [鈥渘ode_modules鈥, 鈥渄ist鈥漖
}

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:

...
  "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 馃槮