A great thing about Webpack is that it allows us to seamlessly automate the jsx conversion, but we can also tell it to refresh the browser to reflect component changes on the page immediately.
I will be using the following React component consisting of two jsx files.
As you can tell I am using CommonJS to import the message component into the jsx file where the rendering is initiated.
I will be relying on npm to add the necessary dependencies, so to get the general setup you may use the following package.json file:
The final configuration step is to create a webpack.config.js file to tell Webpack how to do the jsx conversion.
Lastly we have to add a sample html page to test the component.
To launch the test page in development mode use: npm run start
ProductionProduction files will be static and included using traditional script tags (shown commented out in the sample above).
To trigger a static build of your bundle use: npm run build