Aliasing module import

[s-chillo]

Hi all,

Is there a way to override webpack alias.

I'ld like to turn

import React from 'react'   
import { someConstant } from '../../../config/constants'    
import MyComponent from '../../../../components/MyComponent'    
import { myActionCreator } from '../../../../ducks/someReducer' 

into

import React from 'react'  
import { someConstant } from '@config/constants'  
import MyComponent from '@components/MyComponent'  
import { useHook } from '@hooks/useHook' 

thanks

[icameron]

@s-chillo microbundle supports --alias so update package.json build and start scripts (note: you can use the env var $INIT_CWD and under windows %INIT_CWD%)

scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs --alias @config=%INIT_CWD%/config",
    "start": "microbundle-crl watch --no-compress --format modern,cjs --alias @config=%INIT_CWD%/config",

[loganmurphy]

@icameron do you have a working example of the above? I am having a similar issue as the OP. I have tried using several of the options and am having issues getting my imports working properly. I'd like to use absolute imports from the src dir, so that I am able to build with imports looking like this:

// nice clean imports
export { default as SingleColumnText } from 'components2_0/SingleColumnText/SingleColumnText'
export { default as Footer } from 'components2_0/Footer/FooterContainer'
export { default as Header } from 'components2_0/Header/HeaderContainer'

and not this:

// relative imports are messy
export { default as SingleColumnText } from './SingleColumnText/SingleColumnText'
export { default as Footer } from '../Footer/FooterContainer'
export { default as Header } from '../../../../Header/HeaderContainer'

Here is my start script: "start": "microbundle-crl watch --no-compress --format modern,cjs --cwd src",

[icameron]

@icameron do you have a working example of the above? I am having a similar issue as the OP. I have tried using several of the options and am having issues getting my imports working properly. I'd like to use absolute imports from the src dir, so that I am able to build with imports looking like this:

// nice clean imports
export { default as SingleColumnText } from 'components2_0/SingleColumnText/SingleColumnText'
export { default as Footer } from 'components2_0/Footer/FooterContainer'
export { default as Header } from 'components2_0/Header/HeaderContainer'

and not this:

// relative imports are messy
export { default as SingleColumnText } from './SingleColumnText/SingleColumnText'
export { default as Footer } from '../Footer/FooterContainer'
export { default as Header } from '../../../../Header/HeaderContainer'

Here is my start script: "start": "microbundle-crl watch --no-compress --format modern,cjs --cwd src",

you can use alias to that path where you have your components using --alias i.e @config=%INIT_CWD%/config" and use @config in the import so it reads @config as the full alias path see the https://github.com/developit/microbundle

depending on your environment something like - "start": "microbundle-crl watch --no-compress --format modern,cjs --cwd src --alias @components2_0=%INIT_CWD%/config"

[loganmurphy]

@icameron thanks, thank helped a bunch!