1

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.

TheJediCowboy
  • 8,924
  • 28
  • 136
  • 208
  • What did you see, TheJediCowboy??? What mysteries did you unveil, so far in the past? I'm having similar issues. I suspected at first HtmlWebpackPlugin but now I'm thinking maybe it's an issue with webpackDevServer https://stackoverflow.com/questions/52434167/how-can-i-use-multiple-entries-in-webpack-alongside-multiple-html-files-in-htmlw?noredirect=1#comment91813521_52434167 – Caleb Jay Sep 24 '18 at 22:00

0 Answers0