Webpack on Demand

Motivation

This is an experimental webpack plugin that enables you to only compile
modules once they are requested by the browser. This may be useful
for the develeopment server on large projects, as it is likely developers are
only working on a small section of the application at any time.

> IMPORTANT: This is an experimental and somewhat hacky plugin.
Please do not expect it to work without issues

Installation

Install the package

``
yarn add --dev webpack-on-demand
OR
npm install --save-dev webpack-on-demand
`

In webpack.config.js:

- Create an instance of the plugin

`
const WebpackOnDemand = require('webpack-on-demand').default;

const wodPluginInstance = new WebpackOnDemand();
`

- Enable Hot Module Reloading for your dev server

- Add the plugin to the webpack resolve config
`
resolve: {
plugins: [
wodPluginInstance
],
}
`

- Pass the plugin server bootstrap to the before option of devServer
`
devServer: {
...
before: wodPluginInstance.serverBootstrap
},
`

Usage instructions

Add the ?on-demand query string to an import statement. This will wrap
the import in a callback that returns a Promise.

`
// before
import HomePage from './components/HomePage';

const HomePage = new HomePage();

// after
import getHomePage from './components/HomePage?on-demand';

getHomePage().then(HomePage => {
const HomePage = new HomePage();
});
`

The module will only be compiled once the callback function (in the
above example getHomePage()`) is called. If you're not using the
development server but a regular build, the import will compile
normally but it will still be wrapped in a callback for consistency.

Note: if the same module is imported elsewhere without the ?on-demand
query string, it will still compile immediately.