2

I'm trying to write a plugin (or find one) that for each entry, I can add extra code.

If I have 2 entry files:

// entry1.js
import React from "react";

export default function() {
    return (
        <div>
            Entry 1
        </div>
    );
}

// entry2.js
import React from "react";

export default function() {
    return (
        <div>
            Entry 2
        </div>
    );
}

and a webpack config file:

module.exports = {
    entry: {
        entry1: "./entry1.js",
        entry2: "./entry2.js",
    },
    output: {
        path: path.join(__dirname, "../output"),
        filename: "js/[name].js",
        publicPath: "/",
    },
}

Then each webpack entry should have the following added:

import React from "react";
import ReactDOM from "react-dom";

import Component from "????";

ReactDOM.render(<Component />, document.getElementById("mount"));

Where ???? is ./entry1.js for entry1, and ./entry2.js for entry2, etc.

I've tried child compilation inside the emit phase, but referencing the existing module is a problem, and I think that it should probably be done sooner than emit.

With code like that above, I feel that I really need to replace the entry module with a new module that references the old entry module all before the loaders act on them.

Not really sure where to go from here, so any guidance would be appreciated

flipchart
  • 6,548
  • 4
  • 28
  • 53
  • you could `glob` from `webpack` and pass the value to the `entry` - – Denis Tsoi Apr 25 '17 at 10:25
  • @DenisTsoi not sure what you mean. The code specified is effectively a template that needs to be replicated (but modified) for each entry file – flipchart Apr 25 '17 at 10:32
  • I think I may have misunderstood the original question: - you wish to dynamically include `import Component from ???` - but what is `????` - can you give an example? – Denis Tsoi Apr 25 '17 at 10:34
  • This seems to be similar to your requirement http://stackoverflow.com/questions/36952448/dynamic-loading-of-react-components – sandyJoshi Apr 25 '17 at 10:37
  • @DenisTsoi updated question with larger example – flipchart Apr 25 '17 at 10:43
  • @sandyJoshi Not really. `require.ensure` will create 1 file with the ability to load any entry file (like a router), I want each entry to load only that entry. I create a separate html file for each entry already, so don't want/need a router – flipchart Apr 25 '17 at 10:46
  • sorry if i sound stupid/repeating - so you want to generate webpack bundles based around a `template` to generate unique `react-components` from `entry1/entry2` – Denis Tsoi Apr 25 '17 at 10:50
  • @DenisTsoi yes. the reason is because in dev, each entry needs to have a corresponding hot loader file, and in prod each entry needs simply a render file. I just don't want to create these files over and over for each entry, and would rather have webpack create them for me – flipchart Apr 25 '17 at 10:53
  • i think why i was a bit confused is that, `entry1/entry2` in `src` will end up being different when compiled `src/entry1 != dist/entry1` – Denis Tsoi Apr 25 '17 at 10:54
  • [using bundle suffix to distinguish src from dist] so in `dev` - you want `entry1.bundle.js` to just render the component - whereas in `prod` - you'd probably include `entry1` into the `app.bundle` - is that correct? – Denis Tsoi Apr 25 '17 at 10:58

0 Answers0