Webpack Dev Middleware nicht bündeln.js korrekt

Question

Ich versuche, mein eigenes Redux Starter Kit zu machen und habe es ein wenig refactoring, aber irgendwie jetzt meine bundle.js (und style.css) werden nicht an die Seite korrekt von webpack-dev-middleware. Es ist mir worden nervt, dass ich keine Lösung finden können, so ich hier um Hilfe zu fragen bin :)

Die vier wichtigsten Dateien, die mit dem Problem zu tun haben, sind folgende:

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

Last but not least, ist hier das package.json Skript, das ich dienen bin mit: "serve": "babel-node ./src/server.js"

tl; dr webpack-dev-middleware dient falsch Bündel

Wer weiß, was falsch läuft?

Danke, Jori

Answer 1

ich es fest! Das Problem war, dass die Reihenfolge, in der die Middleware geladen wurde, falsch war.

Einfach ändern die Exportfunktion von ./src/serverConfig.js zu den folgenden behoben mein Problem.

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