javascript - Webpack 开发中间件未正确提供 bundle.js

Question

我正在尝试制作我自己的 redux 入门工具包并对其进行了一些重构，但不知何故，现在我的 bundle.js(和 style.css)没有被 webpack-dev 正确地提供给页面-中间件。一直困扰着我找不到解决方案，所以在这里我寻求一些帮助:)

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

/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}`);
  }
});

/src/serverConfig.js

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

/webpack.config.client.js

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 脚本: "serve": "babel-node ./src/server.js"

tl;dr webpack-dev-middleware 错误地提供包

有人知道怎么回事吗？

谢谢， 乔里

Answer 1

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

只需将 ./src/serverConfig.js 的导出函数更改为以下内容即可解决我的问题。

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