Comments (17)
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 points
Make a text file with all your entry points:
entries.txt
./entryA
./entryB
./entryC
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");
}
webpack ./entries!./entries.txt assets/bundle.js
Should work, but not tested... If it doesn't work it's a bug... ;)
Require a whole directory
var directory = require.context("./tests");
directory.keys().forEach(directory);
from webpack.
If you don't want to modify your code, you can also do via a postLoader
on the entry module, which adds some requires. You may load the additional modules from your config via this.options
in loader context.
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");
}
from webpack.
Yeah, I like the second solution better although it's still a bit cumbersome.
from webpack.
Maybe I add it as feature.
from webpack.
Would be cool!
from webpack.
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");
require("val!./testcases")
or webpack val!testcases.js testBundle.js
from webpack.
π for webpack 0.9.x πΊ
from webpack.
It's planned for 0.9, but I'm not sure about the API.
The default is:
new SingleEntryPlugin(context, entry)
MultiEntryPlugin
may be something like this:
new MultiEntryPlugin(context, [entry1, entry2, ...])
from webpack.
Nice!
from webpack.
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.
page1.bundle.js - entry point 1
page2.bundle.js - entry point 2
1.chunk.js - chunk only used by entry point 1
2.chunk.js - chunk used by both entry points ;)
from webpack.
shortcut:
{
output: {
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
entry: {
page1: "./page1",
page2: "./page2"
}
}
from webpack.
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.
from webpack.
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"
}
}
from webpack.
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?
from webpack.
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?
from webpack.
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 main
function in a C programm. There should only be one per page. In a single page app you have only one entry point. In a multi page app you have one per page. The only difference from multi entry points to multiple bundles (calling webpack multiple times) is that multi entry points can share chunks.
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 require.ensure
or AMD require
.
// 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);
});
});
from webpack.
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.
entry: {
app: "app.js",
'service-worker': 'persistence/service-worker.js'
},
module: {
loaders:[{
test: /\.js|\.jsx/,
loaders: ["react-hot", "jsx?harmony", "babel"],
exclude: /persistence/
}, {
test: /service\-worker\.js/,
loaders: ["babel"],
include: /persistence/
}]
from webpack.
Related Issues (20)
- Webpack build error for second time HOT 1
- `exportsPresence` does not work for unused imports HOT 3
- Implement ability to use "node:" prefixes for Node.js core modules HOT 1
- mangled exports breaks with destructuring assignment of JSON imports HOT 7
- there are confusing JDocs code
- Potential bug issues
- Webpack is not resolving node_modules specified in `resolve.modules` property.
- Dynamically loading chunks
- [Code implementation issues] ArrayQueue
- [feature] create cli HOT 3
- Not able to build node script
- bootstrap:27 Uncaught TypeError: __webpack_require__.nmd is not a function
- Self-reference dependency has unused export name when imported inside of a web worker
- support `import.meta.dirname` and `import.meta.filename` HOT 2
- <!-- identifier: admin-actions -->
- Remote into Web Component from React giving an error saying " Module does not exist in container"
- Multiple DefinePlugin instances cause aggressive cache invalidation due to collisions HOT 7
- Webpack fails when importing module
- import .scss build to js, the exported mapping is inconsistent with the usageγUrgent!!γ
- Unused code elimination and deduplication is not applied when using sass's api: 'legacy' setting
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.