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.