Javascript Webpack dev中间件未正确服务bundle.js

我正在尝试制作自己的redux初学者工具包，并对其进行了一些重构，但不知怎的，现在我的bundle.js（和style.css）没有被

webpack dev middleware

正确地提供给页面。一直困扰我的是，我找不到解决方案，所以我在这里请求一些帮助：）

与此问题有关的四个主要文件如下：

/src/server.js

import express from 'express';
import configureMiddleware from './serverConfig.js';

const app = express();
const PORT = process.env.PORT || 3000;

app.use(configureMiddleware());

app.listen(PORT, (error) => {
  if (error) {
    throw error;
  } else {
    console.log(__dirname);
    console.log(`All is good @ http://localhost:${PORT}`);
  }
});

import express from 'express';
import compression from 'compression';
import React from 'react';
import { match, RouterContext } from 'react-router';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import routes from './routes';
import config from '../webpack.config.client';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

const IS_DEV = process.env.NODE_ENV !== 'production';

function addSharedMiddleware(app) {
  app.set('view engine', 'pug');
  app.set('views', __dirname);

  app.get('*', (req, res) => {
    match({ routes, location: req.url }, (err, redirect, props) => {
      if (err) {
        res.status(500).send(err.message);
      } else if (!props) {
        res.status(404).send('Not Found');
      } else {
        // Set initialState here if needed.
        const initialState = {};
        const store = configureStore(initialState);
        const react = (
          <Provider store={store}>
            <RouterContext {...props} />
          </Provider>
        );

        const reactString = renderToString(react);
        const finalState = store.getState();

        res.render('index', { reactString, finalState });
      }
    });
  });
}

function addDevMiddleware(app) {
  const compiler = webpack(config);
  const middleware = webpackDevMiddleware(compiler, {
    publicPath: config.output.path
  });
  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));
}

function addProdMiddleware(app) {
  app.use(compression());
  app.use(express.static('/'));
}

export default function () {
  const app = express();

  addSharedMiddleware(app);

  if (IS_DEV) {
    addDevMiddleware(app);
  } else {
    addProdMiddleware(app);
  }

  return app;
}

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

const clientConfig = {
  context: `${__dirname}/src`,
  debug: true,
  entry: [path.join(process.cwd(), 'src/app.js')],
  output: {
    path: path.join(process.cwd(), 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  target: 'web',
  plugins: [
    new CopyWebpackPlugin([{
      from: 'index.pug'
    }]),
    new ExtractTextPlugin('style.css')
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(['css', 'sass'])
      }
    ]
  }
};

if (process.env.NODE_ENV !== 'production') {
  clientConfig.entry.unshift('webpack-hot-middleware/client?reload=true');
  clientConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  )
} else {
  clientConfig.plugins.push(
    new webpack.DefinePlugin({
    'process.env':{
      'NODE_ENV': JSON.stringify('production')
    }
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  );
}

module.exports = clientConfig;

/src/serverConfig.js

import express from 'express';
import configureMiddleware from './serverConfig.js';

const app = express();
const PORT = process.env.PORT || 3000;

app.use(configureMiddleware());

app.listen(PORT, (error) => {
  if (error) {
    throw error;
  } else {
    console.log(__dirname);
    console.log(`All is good @ http://localhost:${PORT}`);
  }
});

import express from 'express';
import compression from 'compression';
import React from 'react';
import { match, RouterContext } from 'react-router';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import routes from './routes';
import config from '../webpack.config.client';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

const IS_DEV = process.env.NODE_ENV !== 'production';

function addSharedMiddleware(app) {
  app.set('view engine', 'pug');
  app.set('views', __dirname);

  app.get('*', (req, res) => {
    match({ routes, location: req.url }, (err, redirect, props) => {
      if (err) {
        res.status(500).send(err.message);
      } else if (!props) {
        res.status(404).send('Not Found');
      } else {
        // Set initialState here if needed.
        const initialState = {};
        const store = configureStore(initialState);
        const react = (
          <Provider store={store}>
            <RouterContext {...props} />
          </Provider>
        );

        const reactString = renderToString(react);
        const finalState = store.getState();

        res.render('index', { reactString, finalState });
      }
    });
  });
}

function addDevMiddleware(app) {
  const compiler = webpack(config);
  const middleware = webpackDevMiddleware(compiler, {
    publicPath: config.output.path
  });
  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));
}

function addProdMiddleware(app) {
  app.use(compression());
  app.use(express.static('/'));
}

export default function () {
  const app = express();

  addSharedMiddleware(app);

  if (IS_DEV) {
    addDevMiddleware(app);
  } else {
    addProdMiddleware(app);
  }

  return app;
}

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

const clientConfig = {
  context: `${__dirname}/src`,
  debug: true,
  entry: [path.join(process.cwd(), 'src/app.js')],
  output: {
    path: path.join(process.cwd(), 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  target: 'web',
  plugins: [
    new CopyWebpackPlugin([{
      from: 'index.pug'
    }]),
    new ExtractTextPlugin('style.css')
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(['css', 'sass'])
      }
    ]
  }
};

if (process.env.NODE_ENV !== 'production') {
  clientConfig.entry.unshift('webpack-hot-middleware/client?reload=true');
  clientConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  )
} else {
  clientConfig.plugins.push(
    new webpack.DefinePlugin({
    'process.env':{
      'NODE_ENV': JSON.stringify('production')
    }
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  );
}

module.exports = clientConfig;

最后但并非最不重要的一点，这里是我用来提供服务的package.json脚本：

“服务”：“巴别塔节点。/src/server.js”

tl；dr

webpack开发中间件

错误地服务捆绑包

有人知道出了什么问题吗

谢谢，

---

乔里

我修好了！问题是中间件的加载顺序是错误的

只需将导出函数

/src/serverConfig.js

更改为以下内容，即可解决我的问题

function configureMiddleware () {
  if (IS_DEV) {
    addDevMiddleware(app);
  } else {
    addProdMiddleware(app);
  }
  addSharedMiddleware(app);
}