Alias de ruta para importaciones en WebStorm

Me las arreglé para configurar alias para WebStorm 2017.2 dentro de webpack como este:

No en este momento, también estábamos usando alias de ruta para los archivos en nuestro proyecto react. Los nombres de importación eran más cortos, pero perdimos mucho en la comprobación estática de webstorm, así como las características de finalización.

Más tarde se nos ocurrió la decisión de reducir el código a solo 3 niveles de profundidad, así como un solo nivel para las partes comunes. La función de finalización de ruta de webstom (ctrl + space) incluso ayuda a reducir la sobrecarga de escritura. La construcción de producción no utiliza nombres más largos, por lo que apenas hace ninguna diferencia en el código final.

Sugeriré que reconsidere su decisión sobre los alias. Perder el significado semántico de los módulos que vienen de node_modules y su propio código, así como hacer referencia a los archivos de alias una y otra vez para dar sentido a su código, es una sobrecarga mucho mayor.

Para el registro: en PHPSTORM, trabajando con laravel mix, logré resolver esto creando un webpack.config.archivo js por separado como:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

Y luego importarlo en el webpack.mezcla.js like:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Asegúrese de que el archivo de configuración de webpack esté apuntado correctamente en la configuración de PhpStorm en: Settings > Languages & Frameworks > Javascript > Webpack

Esto se responde en un comentario, pero para evitar que las personas caven en comentarios y enlacen solo información, aquí está:

A partir de WS2017.2 esto se hará automáticamente. La información está aquí.

De acuerdo con esto, webstorm resolverá automáticamente los alias que se incluyen dentro de la webpack.config en la raíz del proyecto. Si tiene una estructura personalizada y su webpack.config no está en la carpeta raíz, vaya a Settings | Languages & Frameworks | JavaScript | Webpack y establezca la opción en la configuración que requerir.

Nota: La mayoría de las configuraciones tienen una configuración base que luego llama a una versión dev o prod. Para que esto funcione correctamente, necesita decirle a webstorm que use el dev.

En PhpStorm (usando 2017.2 actualmente), no he podido obtener configuraciones de webpack para que funcionen correctamente en lo que respecta a los alias.

Mi corrección implica usar la sección "Directorios" de la configuración principal. Solo tenía que marcar cada carpeta referenciada por un alias como raíz de fuentes, luego hacer clic en el menú desplegable propiedades para cada una y especificar el alias como un "prefijo de paquete". Esto hizo que todo se vinculara para mí.

No estoy seguro de si la sección Directorios existe en WebStorm, pero si lo hace, esto parece ser un método infalible para hacer funcionar los alias de importación.

Para cualquiera que esté luchando: camino.se debe llamar a resolve () con el primer argumento "__dirname" para que Idea (Websorm) pueda resolver la ruta correctamente.

Funcionará para Idea (Websorm):

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

No funcionará para Idea (Websorm) (aunque sigue siendo un alias de webpack válido):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}