-2
React-RouterとWebpack-Dev-Serverを使用してwebpackを初めてセットアップするときに問題が発生しました。Webpack-Dev-Serverを設定したReact-Router
このように設定したいのは、コード内で何か変更するたびにwebpack-hot-middlewareを使用してページをリロードすることを利用することです。
私はIndexPageに対して正しくレンダリングできますが、URLの別のエントリポイントに手入力すると、実際にはReact-Routerにある別の場所を取得していると思います。ここで
は、現在の設定（またはGithub repository）です：WebPACKの
var path = require('path');
var webpack = require('webpack');
var express = require('express');
var config = require('./webpack.config');
var app = express();
var compiler = webpack(config);
//
app.use(require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(3000, function(err) {
if (err) {
return console.error(err);
}
console.log('Listening at http://localhost:3000/');
})
のsrc /クライアント/ index.jsため
webpack.config
var path = require('path')
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/client/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [{
exclude: /node_modules/,
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
},{
test: /\.s?css$/,
loaders: ['style','css','sass'],
include: path.join(__dirname, 'src')
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
server.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import thunk from 'redux-thunk';
import App from './components/app';
import VotesContainer from './containers/votes-container';
import Welcome from './components/welcome'
import reducers from './reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)))
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Welcome} />
<Route path="allposts" component={VotesContainer} />
</Route>
</Router>
</Provider>
, document.querySelector('#project'));
package.json
{
"name": "simple-app",
"version": "1.0.0",
"description": "demo",
"main": "index.js",
"repository": "",
"scripts": {
"start": "node server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --require ignore-styles --recursive ./test",
"test:watch": "npm run test -- --watch",
"dev": "nodemon src/server/index.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"express": "^4.13.4",
"ignore-styles": "^5.0.1",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"node-sass": "^3.8.0",
"react-addons-test-utils": "^0.14.7",
"react-hot-loader": "^1.3.1",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.10.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.2",
"css-loader": "^0.26.1",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"lodash": "^3.10.1",
"mongoose": "^4.7.1",
"morgan": "^1.7.0",
"node-sass": "^3.13.0",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"passport-local": "^1.0.0",
"proxy-middleware": "^0.15.0",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.8.1",
"react-thunk": "^1.0.0",
"redux": "^3.0.4",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1"
}
}