Express 不在根url中时未编译网页包

我在webpack.config.js中指定了以下输出部分：

output: {
  path: path.resolve(__dirname, 'dist/'),
  publicPath: '/'
},

然后，我将express服务器设置为：

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.dev');

const app = express();
const compiler = webpack(config);

var host = config.host || 'localhost';
var port = (Number(config.port) + 1) || 4040;

const serverConfig = {
  contentBase: 'http://' + host + ':' + port,
  quiet: true,
  noInfo: true,
  hot: true,
  inline: true,
  lazy: false,
  headers: {'Access-Control-Allow-Origin': '*'},
  stats: {colors: true},
  publicPath: '/'
};

app.use(express.static(__dirname + '/public'));

app.use(require('webpack-dev-middleware')(compiler, serverConfig));
app.use(require('webpack-hot-middleware')(compiler));

const indexFile = path.join(__dirname, './client/public/index.html');

app.use(express.static(__dirname + './build'))

app.get('*', function(req, res) {
  console.log(req.originalUrl);
  res.sendFile(indexFile);
});

app.listen(4040, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:4040');
});

当我位于根url，即“/”时，将呈现bundle.js文件：

<script src="bundle.js"/>

---

但是，当我导航到非根url并刷新页面时，webpack不会呈现bundle.js，也不会添加脚本标记。

默认情况下，只有根url提供

index.html

。您需要在dev服务器配置中启用historyApiFallback

historyApiFallback:true

。这样，服务器将在所有路由中提供index.html。

默认情况下，只有根目录提供

index.html

。您需要在dev服务器配置中启用historyApiFallback

historyApiFallback:true

。这样，服务器将在所有路由中提供index.html。

结果更复杂，因为我使用的是

HtmlWebpackPlugin

，这将修复它：

var express = require('express');
var app = express();
var webpack = require('webpack');
var path = require('path');

var compiler = webpack(require('./webpack.config.js'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: '/'
}));

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

app.listen(3000);

---

由于我使用的是

HtmlWebpackPlugin

，所以这个问题更加复杂，这就解决了它：

var express = require('express');
var app = express();
var webpack = require('webpack');
var path = require('path');

var compiler = webpack(require('./webpack.config.js'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: '/'
}));

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

app.listen(3000);

---

我使用的是express，不是网页开发服务器我使用的是express，不是网页开发服务器