配置Webpack使其在相对路径上做出反应

Question

我有一个koajs服务器，它充当/ dist文件夹中的静态文件。

const static_pages = new Koa();
static_pages.use(serve(process.env.PWD + "/dist")); 
app.use(mount("/app", static_pages));

问题是，我想从/ dist在相对路径“ / app”处挂载index.html，因为在“ /”处我还有其他东西。 我的webpack.config.js看起来像这样：

  entry: "./static/index.js",
  output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name].js"
  },

其中 static / index.js 是我的React应用。当我打开浏览器时，出现500错误

“ http：// localhost：4000 / main.js net :: ERR_ABORTED 500（内部服务器 错误）”

但是，如果我进入 localhost：4000 / app / main.js ，那么我会得到 main.js 捆绑文件，但是我从dist的 index.html 尝试获取main.js而不是 /app/main.js。

我应该如何更改webpack配置文件的捆绑包，以便将我的应用安装在相对路径上？

Answer 1

如果您愿意在开发中使用React + Koa，则应使用webpack-dev-server为您提供与指定端口上的HRM的React捆绑包，否则，如果您愿意从React分离静态构建.js文件，您应该使用koa-static中间件，该中间件将允许您提供捆绑软件。

根据您的Webpack配置，您缺少重要的html-webpack-plugin，它将在捆绑包中生成index.html（没有koa无法在指定路径上提供内容）

Answer 2

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./static/index.html", 
  filename: "./index.html"
});

这是我的HtmlWbpackPlugin配置。我设法通过将publigPath添加到这样的输出中来解决该问题：

  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js",
    publicPath: '/app'
  },

我不知道这是否是最好的解决方案，但它能奏效