进一步研究Webpack我们应该清楚Webpack是什么以及它用于什么。 Webpack是前端工具，它将构建前端项目，并具有管理类似于gulp / grunt的任务的能力。它可以是服务静态内容的服务器。但它不是一个完整的后端服务器。您无法轻松构建后端API并管理复杂的路由。这包括登录功能等。而不是重新发明***，使用Webpack作为开发工具，轻松修改和查看网页设计的更新结果。如果您需要更多功能，请通过在监视模式下运行Webpack来集成Webpack，同时运行后端服务器并设置代理，以便Webpack将遵循后端服务器进行复杂路由。你可以使用任何后端技术，虽然Webpack是基于Common.js库构建的，因此将它集成到node.js和express中似乎是最简单的，因为它们是javascript生态系统的一部分。

Looking into Webpack further we should be clear about what Webpack is and what it is used for. Webpack is front end tool, it will build front end projects and has the capability of managing tasks similar to gulp/grunt. It can be a server to serve static content. But what it is not is a full fledged back end server. You can't easily build back end API and manage complex routing. This includes things like login functionality. Instead of reinventing the wheel, use Webpack as a dev tool to easily modify and see the updated result for web design. And if you need more functionality integrate Webpack by running it in watch mode and run the back end server at the same time and setup a proxy so that Webpack will defer to the back end server for complex routing. You can use any back end technology, though Webpack is built on Common.js library so integrating it into node.js and express seems to be the easiest because they are part of a javascript ecosystem.

如果我可以发表评论，无论如何，我正在阅读DevServer的webpack文档，我认为服务器响应的MIME类型不正确可能是因为它没有找到bundle.js脚本所在它期待着它。我注意到控制台输出为' http：// localhost：8090 / auth / bundle.js 并且在文档中，dev服务器期望它在根目录中。我认为如果bundle.js真的在auth目录中，你可能需要通过publicPath选项告诉服务器它在哪里。

If I could comment I would, anyhow, I was reading through the webpack docs for the DevServer and I Think that the server is responding with the incorrect MIME type possibly because it isn't finding the bundle.js script where it is expecting it. I noticed the console output being 'http://localhost:8090/auth/bundle.js' and in the documentation the dev server expects it in the root. I think that if bundle.js is really in the auth directory that you may need to tell the server where it is with the publicPath option.

output: {
  filename: 'bundle.js',
  sourceMapFilename: '[file].map',
  path: path.resolve('build/js/),// moves the bundle.js out of the root
  publicPath: '/auth/' // it is recommended that the publicPath is declared in both output and devServer
  // publicPath links the path of bundle.js to this path in the html.
},
devServer: {
  contentBase: path.resolve(__dirname), // New
  historyApiFallback: true,
  publicPath: "/auth/" // Both publicPath options should be the same as what is in your html loading the scripts
},

据我了解webpack dev服务器，bundle.js不会写入光盘。虚拟服务。

As I understand the webpack dev server, the bundle.js is not written to disc. It is served virtually.

现在所有这些都需要代理已经构建的node.js服务器或者构建一个来处理你需要的api使用。 Webpack提供了一个开发中间件模块，用作基本node.js express服务器中的中间件。您可以在此处查看中间件的基础知识。你真正需要从文档开始的是通过npm webpack-dev-middleware和express安装

Now with all of this there is a need to either proxy the already built node.js server or build one to handle just the api you need to use. Webpack provides a dev middleware module to use as middleware in a basic node.js express server. You can see the basics of the middleware here. What you really need to start with from the documentation is installing via npm webpack-dev-middleware and express

npm install --save-dev webpack -dev-middleware express

然后在项目的根目录中创建一个新的服务器文件，如index.js，因为你已经有了一台服务器。 JS。现在创建您需要的基本服务器，只需要处理api调用所需的路由和包。

Then create a new server file like index.js in the root of the project because you already have a server.js. Now create the basic server that you need with only the routing and packages you need to handle the api calls.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

这是来自webpack网站，您需要自己进行api路由。你可以像普通的节点项目那样运行项目，它应该处理bundle.js请求。

This is from the webpack website and you will need to do your own api routing. And you would run the project like a normal node project and it should handle the bundle.js requests.

让我们不要忘记koa有一个插件 koa-webpack-dev 。我没有亲自使用过koa，但如果你需要它，你可以看看如何使用它这里。

And let's not forget that there is a plubin for koa koa-webpack-dev.I haven't personally used koa, but if you need it you can see how to use it here.