reactjs - Webpack multiple jsx compile setting -

i trying load multiple .jsx files compile one.

right now, have app.jsx file , home.jsx file in same directory. want compile them using webpack , combine 2 outputs 1 file. compile 1 @ moment, compiled code home.jsx isn't imported first, routes not know point to.

i've attached app.jsx, home.jsx , webpac.config.js. please :)

app.jsx

import react "react";  var router = require('react-router'); var route = router.route; var routehandler = router.routehandler; var home = require('./home.jsx');  define(["./home.jsx"], function (){  })  app = react.createclass({     render () {         return (             <div>                 <h1>hire monster app</h1>                 <routehandler/>             </div>         )     } });  var routes = (     <route handler={app}>         <route path="/" handler={mainpage}/>         <route path="login" handler={home.jobs}/>         <route path="jobs" handler={home.jobs}/>     </route> );  router.run(routes, router.hashlocation, (root) => {     react.render(<root/>, document.body); }); 

home.jsx

import react "react"; var mainpage; module.exports = react.createclass({       render: function () {         return (           <h1>hello world!</h1>         );       }     });  /* module.export ={}     var mainpage = react.createclass({         render: function () {             return <h1>welcome!</h1>;         }     });      var login = react.createclass({         render: function () {             return <h1>login</h1>;         }     });      var jobs = react.createclass({         render: function () {             return <h1>jobs</h1>;         }     }); */ 

webpack.config

module.exports = {     entry: {         bundle1:["./src/app.jsx","./src/home.jsx"]     },     output: {         path: "../public/javascripts",         filename: "hire.js"     },     module: {         loaders: [             { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }         ]     } } 

a couple of things consider.

1. why amd style define([]), when require() before?

2. you're mixing es6 module format , commonjs module format in several places. consistency i'd suggest following: if use import should use export default instead of module.exports , never use require() or define()

3. usually idea of entry file single entry point you'd use <script> tag. long entry point contains import or require() other file should included , additional configuration inside of webpack.config.js not needed.

specific suggestions:

first can remove of following config.

entry: {     bundle1:["./src/app.jsx","./src/home.jsx"] }, output: {     path: "../public/javascripts",     filename: "hire.js" } 

instead specific webpack call this:

webpack ./src/app.jsx --output-file ../public/javascript/hire.js

until wrap head around of config options simplest.

next remove define() call. not needed.

finally switch require() statements use import , module.exports export default

once if doesn't work update code , we'll think through it!