New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add multiple entry points to one bundle #15
Comments
There is only one entry point in webpack. You need to require the "other" entry points in the single entry point. // entry.js
require("./entryA");
require("./entryB");
require("./entryC"); Emulate multiple entry pointsMake a text file with all your entry points: entries.txt
Make a loader which convert it to the real entry point: entries.loader.js
module.exports = function(entries) {
return entries
.split(/\r\n?/g)
.map(function(r) {
return "require("+JSON.stringify(r)+")";
})
.join("\n");
}
Should work, but not tested... If it doesn't work it's a bug... ;) Require a whole directoryvar directory = require.context("./tests");
directory.keys().forEach(directory); |
If you don't want to modify your code, you can also do via a config = {
postLoaders: [
{ test: /entry\.js$/, loader: path.join(__dirname, "additionalModules") }
],
additionalModules: [
"./entryA",
"./entryB",
"./entryC"
]
} // additionalModules.loader.js
module.exports = function(source) {
return source + "\n\n" +
this.options.additionalModules
.map(function(r) {
return "require("+JSON.stringify(r)+");";
})
.join("\n");
} |
Yeah, I like the second solution better although it's still a bit cumbersome. |
Maybe I add it as feature. |
Would be cool! |
Here is a good solution. // testcases.js
var fs = require("fs");
var path = require("path");
var pathTests = path.join(__dirname, "test");
module.exports = fs.readdirSync(pathTests)
.map(function(test) {
return path.join(pathTests, test);
}).filter(function(test) {
return fs.statSync(test).isFile()
}).map(function(test) {
return "require(" + JSON.stringify(test) + ");";
}).join("\n");
|
👍 for webpack 0.9.x 😺 |
It's planned for 0.9, but I'm not sure about the API. The default is: new SingleEntryPlugin(context, entry)
new MultiEntryPlugin(context, [entry1, entry2, ...]) |
Nice! |
While webpack was used to be optimized for single page applications, you now are allowed to specify multiple entry points. {
output: {
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
plugins: [
new SingleEntryPlugin(__dirname, "./page1", "page1"),
new SingleEntryPlugin(__dirname, "./page2", "page2")
]
} This creates multiple entry bundles, but they can share chunks.
|
shortcut: {
output: {
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
entry: {
page1: "./page1",
page2: "./page2"
}
} |
Cool! 🍦 I'll test it. Our use-case was unit testing. In this case you usually don't have one single entry module, but a whole directory of tests. A test runner like mocha then just executes all modules within test. |
The multi entry point: {
output: {
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
entry: ["./part1", "./part2"]
} Or combine both: {
output: {
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
entry: {
page1: ["./part1", "part2"],
page2: "./page2"
}
} |
With this multiple entry points solution, is there a way to specify when the multiple entry points are invoked? It looks like webpack bundles each of the entry points into the main bundle and invokes each of them immediately. I'd like to tell webpack about my entry points so that it can analyze my dependency graph correctly, but I'd like to define when, for example, the second entry point is invoked. Is that possible? |
Sorry, I found an answer to my question reading the documentation more clearly. However, I noticed that when webpack builds out separate bundles for each entry point, it bundles critical dependencies into each of the bundles. My use case involves client-side routing and asynchronously invoking the second entry point. It seems simple enough to invoke the second entry point asynchronously, but it's clearly suboptimal to have an async require where shared dependencies are duplicated. Is there a way around this? |
Maybe I misunderstood your question, but what you describe are not "multiple entry points". It's simply code splitting. An entry point is the entry. You can compare it to a I added an example to the webpack examples folder. To continue the analogy to C programms: An entry point/chunk is similar to an executable. A chunk is similar to a SO/DLL. Only one executable can run at a time, it loads SOs/DLLs on demand. SOs/DLLs can be shared between executables. If you want to load something on demand use code-splitting with // Client side routing
router.route("/pageA", function() {
require(["pageA"], function(page) {
page.show();
});
});
router.route("/pageB/:arg", function(arg) {
require(["pageB"], function(page) {
page.show(arg);
});
}); |
Can you load an secondary entry with a different set of loaders? For instance, I'm trying to create a service worker for offline caching. I've excluded the folder that contains the service worker and included it on the other. There are no calls to the service-worker.js (it's just manually loaded in the static index.html). The service-worker entry point is picking up React and hot loader instead of just going through Babel. Here's the salient parts of my config.
|
I want to use webpack to bundle unit tests in the test-folder. Therefore I want to search the test-folder for js-files and add these files to the bundle created by webpack. Is it possible to add multiple entry points like
.addEntry()
in browserify?The text was updated successfully, but these errors were encountered: