不在根URL中时Webpack不编译

Question

I have the following output section specified in my webpack.config.js:

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

I then have my express server set up like this:

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

When I am at the root url, ie '/' then the bundle.js file is rendered:

<script src="bundle.js"/>

But when I navigate to a non root url and refresh the page, webpack does not render the bundle.js and the script tag is not added.

Answer 1

By default only the root serves index.html . You need to enable historyApiFallback in your dev server config historyApiFallback: true . That way the server will serve index.html in all routes.

Answer 2

Turns out this more convoluted because I am using the HtmlWebpackPlugin , this fixes it:

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);