Serving two entrypoints with webpack-server and Webpack4

220 Views Asked by At

We have two entrypoint (index and auth), that we want to be served using separate routes in development.

We want the following routing when we run webpack-serve for development.

/ is routed to the index entry point. /auth is routed to the auth entry point.

Our webpack.common.js looks like the following

module.exports = {
    entry: {
        index: './app/index.js',
        auth: './app/auth.js',
    },
    module: {
      // ommitted
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './app/index.html',
            filename: './index.html',
            chunks: ['index'],
            excludeChunks: ['polyfills'],
        }),
        new HtmlWebPackPlugin({
            template: './app/index.html',
            filename: './auth.html',
            chunks: ['auth'],
        }),
    ],
};

And we have a webpack.development.js with the following

const history = require('connect-history-api-fallback');
const convert = require('koa-connect');
const proxy = require('http-proxy-middleware');
const Router = require('koa-router');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const BASE_URL = 'http://localhost:8080';

const router = new Router();

const proxyOptions = {
    target: `${BASE_URL}/auth.html`,
    changeOrigin: true,
};

router.all('/auth', convert(proxy(proxyOptions)));
router.all('/', convert(history()));

module.exports = merge(common, {
    serve: {
        add: (app, middleware) => {

            middleware.webpack();
            middleware.content();

            app.use(router.routes());
        },
    },
    mode: 'development',
    devtool: 'inline-source-map',
});

Am I completely going down the wrong direction with this, it seems like such a trivial/common idea, but I am struggling to find a solution.

BONUS POINTS You might notice the convert(history()) on the / route. We technically need this for both, but I am unsure how to solve the proxy issue and that given the examples provided.

0

There are 0 best solutions below