1

我们有两个入口点（index和auth），我们希望在开发中使用单独的路线来提供服务。

当我们运行webpack-serve开发时，我们想要以下路由。

/被路由到index入口点。 /auth被路由到auth入口点。

我们的webpack.common.js样子如下

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'],
        }),
    ],
};

我们有一个webpack.development.js与以下

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',
});

我是否完全走错了方向，这似乎是一个微不足道/常见的想法，但我正在努力寻找解决方案。

奖励积分您可能会注意到路线convert(history())上的。/从技术上讲，我们两者都需要这个，但我不确定如何解决代理问题以及给出的示例。

4

0 回答 0