'React in WordPress plugin with split bundles for public and admin side

I'm working on a WordPress plugin using React. I started off https://github.com/robicse11127/wp-react-kickoff as a base and everything works fine, except for the part where it generates one single bundle for the whole React app. Since my plugin consists in multiple separate apps for different parts of the dashboard and another distinct app for the front, it doesn't make much sense to use one single bundle file; I'd rather have each part bundled separately and loaded where needed: dashboard app in the dashboard, editor app in the edit posts pages, public app on the public pages, etc.

I tried using webpack chunks like described here, but couldn't make it work properly. It actually somewhat worked in the dedicated React app I created with create-react-app to build my components before moving to WordPress, but wp-react-kickoff seems to work quite differently (no public folder, no index.html, which is actually what I want) and I couldn't make it work.

Here's what I'd like to have:

my-plugin
|___admin
    |___css
        |___...
    |___js
        |___dashboard.js
        |___editor.js
        |___settings.js
|___includes
    |___... wp plugin stuff
|___public
    |___css
        |___...
    |___js
        |___app.js
|___src
    |___components
        |___ ...
    |___app.js
    |___dashboard.js
    |___editor.js
    |___settings.js
    |___index.js
|___package.json
|___webpack.config.js

Currently I use src/index.js to load my separate apps (dashboard, editor, settings and app, this last one being the public part) and all of them get bundled in a dist/bundle.js that is loaded by WordPress on both admin and front sides. How can I make it so that my different apps end up is separate files in public/js and admin/js like above? Bonus question, I'm currently using external CSS edited manually and I'm considering moving to SASS to be bundled with webpack along with the React apps, using the same separate files logic. Can this be done?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source