Webpack 2 resolves an alias

Question

I have a little problem in resolving aliases in webpack 2. No matter what I do, I cannot solve it. 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 

Answer 1

The resolve.root option no longer exists in webpack 2. Instead, it is combined into resolve.modules (from the official Migration Guide ). Webpack even throws an error that this is an invalid property. If you want to import from the root directory, you must change the permission configuration to:

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

Alternatively, you can use the absolute path in resolve.alias like this:

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

Answer 2

Try the following:

 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' } } 

Answer 3

In ionic 3 (version 3.13.3), in order to work with an alias, you need to define the mapping of the path in both webpack.config.js and tsconfig.json

Please write the full answer here here.