Question

我们有两个入口点（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())路线上的/。我们在技术上需要这两者，但我不确定如何解决代理问题以及提供的示例。

使用webpack-server和Webpack4

0 个答案: