html-webpack-plugin上的动态React路由

Question

I am using react dynamic routes:

<Route
      path="/"
      getComponent={(location, cb) => {
        System.import('./App')
              .then(loadRoute(cb))
              .catch(errorLoading);
      }}
 />

I have only one entry point at webpack:

context: path.resolve(__dirname),
  entry: {
    app: './assets/js/components/index',
  },

and webpack is generating each app.js and one file for each route.

But my generated html file does not have the import for these js files.

Is there some setup for this?

Answer 1

The point of doing code splitting this way is to avoid loading all the necessary code at the beginning, so it's normal that your html file doesn't load these scripts, as that would defeat the whole point! :)

If everything works as it should, if you open the network inspector in your browser, you should see the async requests to fetch the route bundles as you navigate around your app.