Webpack dev中間件沒有正確提供bundle.js

我正在嘗試製作自己的Redux入門工具包並重構了一下，但不知何故，現在我的bundle.js（和style.css）不能提供給通過webpack-dev-middleware正確。它一直纏着我，我不能找到一個解決辦法，所以我在這裏尋求一些幫助:)Webpack dev中間件沒有正確提供bundle.js

有這個問題做的四個主要文件有以下幾種：

/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;博士webpack-dev-middleware不當供應束

有誰知道是怎麼回事？

感謝，焦裏

來源

2016-06-01 Jori

我定了！問題在於中間件加載的順序是錯誤的。

只需將./src/serverConfig.js的導出功能更改爲以下固定我的問題。

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

來源

2016-06-01 14:37:08 Jori

Webpack dev中間件沒有正確提供bundle.js

回答

相關問題