我尝试制作自己的redux入门套件并进行了一些重构，但不知怎的，现在我的bundle.js（和style.css）没有正确地通过{{{{{{{{ 1}}。我一直在找不到解决方案，所以我在这里寻求帮助：）
与此问题有关的四个主要文件如下：
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}`);
}
});
/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最后但并非最不重要的，这是我用来服务的package.json脚本：
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;
tl; dr "serve": "babel-node ./src/server.js"错误地提供了包
有谁知道出了什么问题？
谢谢， JORI
答案 0 :(得分：1)
我修好了！问题是加载中间件的顺序是错误的。
只需将./src/serverConfig.js的导出功能更改为以下修复我的问题。
function configureMiddleware () {
if (IS_DEV) {
addDevMiddleware(app);
} else {
addProdMiddleware(app);
}
addSharedMiddleware(app);
}