How to set 'src' to resource root in webpack?

user_5308684 0
Viewed 2033

I have a react application, with custom webpack config (webpack-encore).

How can I set 'src' folder as resource root.
Ex:

I want to use 

import 'components/someComponent.jsx'

instead of 

import '../../components/someComponent.jsx'

Folder structure:

  1. -app
  2. --src
  3. ---components
webpack-encore webpack reactjs node.js path
2 Answers

All you have to do is adding like this in webpack config.

module.exports = {
 // ...
 resolve: {
  modules: [path.resolve(__dirname, 'app/src')]
 }
}
user_56460590

You can create some alias and then use a shorter path 

let config = Encore.getWebpackConfig();
config.resolve.alias["~"] = path.resolve(__dirname, 'app/src');
module.exports = config;

Now your import will look like

import SomeComponent from '~/components/someComponent.jsx'
user_55673870
Related