A webpack plugin allowing you to specify a "middleware" file which takes the place of your entries. With it you can programatically bundle any number of entry modules, all of which should share a common bootstraping logic. For each entry file, the common module will be loaded instead. Within that common module, importing __webpack_entry__ will resolve to the original entry file respective to each instance of the common, inserted module.
Similarly to a React Next.js stack, you might have a folder containing a number of modules. Each of those export a default component, which supplies the "page" for a named route. This plugin allows a similar workflow, but to those who prefer shipping static page-bundles using HTMLWebpackPlugin, thus bypassing SSR.
npm install --save-dev webpack-intermediate-entry
Check out /example in this repo for a good example of how this plugin fits into a project.
In your config, import and include this package amongst your plugins.
webpack.config.js
const IntermediateEntryPlugin = require("webpack-intermediate-entry");
module.exports = {
entry: {
hello: "./hello.js"
},
plugins: [
new IntermediateEntryPlugin({ insert: "./init.js" })
]
}In your config, import and include this package amongst your plugins.
hello.js
export default "Hello World!"Within your intermediate, you can include common init logic. Simply import your actual entry and do what you will with it.
init.js
import Entry from "__webpack_entry__";
console.log(Entry);In a more realistic use case,
init.jsmight contain aReactDOM.render()call, which consumes the component suppliedby your entries.