Lazy load + multiple end points about webpack-book

[bebraw]

I don't see why something like this wouldn't be possible. Would it be possible for you to give it a go and link me to the repo when you get stumped with something?

[chemoish]

Hi @bebraw,

https://github.com/chemoish/react-webpack.git

Commits are segmented in the order I am following his article.

Eventually, I would like to figure out routing and isomorphic design (which i think pete-hunt just published something this weekend).

🙇

Currently,

// webpack.config
{
    entry: {
        ...
        pageHome: './src/components/Home.js',
    },

    output: {
        ...
        path: 'build'
    }
}

// app
require.ensure([], function (require) {
    var Home = require('../build/pageHome.js');

    React.render(<Home />, $('#main').get(0));
});

// pageHome
module.exports = React.createClass({
    render: function () {
        return (
            <h1>Home</h1>
        );
    }
});

And I notice that webpack is creating a file in memory called 1.1.js—which seems fine, or whatever, but it looks like its running ./src/components/Home.js in a eval() and that function is returning an empty {} (I guess because there is no module.export in that generated file).

[chemoish]

It also looks like its being wrapped in webpackJsonp, which is probably the culprit.

[bebraw]

If you relax the multiple entry point requirement, you get

diff --git a/package.json b/package.json
index 1b5c7a8..a123588 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "Testing out react-webpack: http://christianalfoni.github.io/javascript/2014/12/13/did-you-know-webpack-and-react-is-awesome.html",
   "main": "index.js",
   "scripts": {
+    "build": "webpack",
     "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/webpack.config.js b/webpack.config.js
index 8b47910..54fd39a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,8 +8,8 @@ module.exports = {
         ],

         app: './src/app.js',
-        pageHome: './src/components/home.js',
-        pageSetting: './src/components/setting.js'
+        //pageHome: './src/components/Home.js',
+        //pageSetting: './src/components/Setting.js'
     },

     output: {

You can try applying that with git apply.

There was a conflict between entry points and CommonsChunkPlugin so I needed to comment out the entry points.

Now the question is can we find some acceptable compromise here given having both is not possible?

[chemoish]

So, do I understand correctly that you cannot achieve…

Multiple entry points (bundles), which have their common code extracted, and then the bundles themselves lazy loaded when necessary?

I have already went through consolidating it down to one entry point (which there are many examples of out there), but then you cannot extract out common code from said entry points.

Shared.js gets embedded per lazy loaded file.

[bebraw]

Yeah, some kind of a compromise is needed by the looks of it unless I'm understanding something wrong. One way to work around the entry restriction would be to generate separate bundles per entry. You can achieve this with some extra fiddling (run webpack through Node cli and alter entry).

[chemoish]

Darn. It was so close to being perfect.

I'll inquire how Pete hunt is achieving it in his how to examples.

Thanks.
On Aug 10, 2015 12:05 PM, "Juho Vepsäläinen" [email protected]
wrote:

Yeah, some kind of a compromise is needed by the looks of it unless I'm
understanding something wrong. One way to work around the entry restriction
would be to generate separate bundles per entry. You can achieve this with
some extra fiddling (run webpack through Node cli and alter entry).

—
Reply to this email directly or view it on GitHub
https://github.com/christianalfoni/react-webpack-cookbook/issues/39#issuecomment-129568052
.