To easily convert my code into a single module using webpack, I can use the following method:
{
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'umd',
library: 'totem-ui',
}
}
The content of my src/index.js file is as follows:
export { default as Button } from 'src/atoms/Button';
This can be utilized by third-party applications like this:
import { Button } from 'totem-ui';
However, my goal is to achieve something similar to how libraries like react-router or lodash operate. For instance, with react-router, you can import a single module in this way:
import Router from 'react-router/lib/Router';
In my scenario, it would appear like this:
import Button from 'totem-ui/atoms/Button';
How can this functionality be achieved using webpack? What is this particular pattern referred to as?