Webpack 2 resolve alias

Question

I have a little problem regarding resolving aliases in webpack 2. No matter what i do i cant resolve this. Here is the relevant code:

/* webpack.mix.js */

       mix.webpackConfig({
         module: {
               rules: [
                   {
                       test: /\.js$/,
                       loader: 'eslint-loader'
                   }
               ]
           },
           resolve: {
             root: path.resolve(__dirname), 
                    // path is reqired at the beggining of file 
             alias: {
               config: 'src/assets/js/config', // this is a config folder
               js: 'src/assets/js'
             }
           }
       });

/* router.js */ 

        import { DashboardRoute } from 'config/route-components'
      // this import is unresolved

score 3 · Answer 1 · answered Mar 07 '17 at 09:09

The resolve.root option no longer exists in webpack 2. Instead it is merged into resolve.modules (from the official Migration Guide). Webpack even throws an error that it's not a valid property. If you want to be able to import from your root directory you would change the resolve config to:

resolve: {
  alias: {
    config: 'src/assets/js/config',
    js: 'src/assets/js'
  },
  modules: [
    path.resolve(__dirname),
    'node_modules'
  ]
}

Alternatively you can use an absolute path in your resolve.alias like so:

resolve: {
  alias: {
    config: path.resolve(__dirname, 'src/assets/js/config'),
    js: path.resolve(__dirname, 'src/assets/js')
  }
}

tnx a lot for your answer. I'm having the same issue but for some strange reason the aliases don't work for me. When I try to import using aliases I get: Unable to resolve path to module 'Components/pages/Master' Unable to resolve path to module 'Styles/main.css' Any other ideas? — Loves2Develop, May 25 '17 at 08:14

score 1 · Answer 2 · answered Mar 07 '17 at 09:06

1

Try this:

resolve: {
  root: [
    'node_modules',
    path.resolve('src') // Resolve on root first
  ], 
  alias: {
    config: 'src/assets/js/config', // this is a config folder
    js: 'src/assets/js'
  }
}

answered Mar 07 '17 at 09:06

Alfred Crosby

136
1
9

score 0 · Answer 3 · answered Oct 23 '17 at 23:33

0

In ionic 3 (version 3.13.3), in order to get alias mapping working, you will have to define path mapping both in webpack.config.js & tsconfig.json

Please refer complete answer here question here

answered Oct 23 '17 at 23:33

Maverick09

1,067
1
11
21

Webpack 2 resolve alias

3 Answers3