package.json:
此处用到nodemon跑服务器:命令行输入:npm run serve即可,会忽略components的改变,其余时候都会自动重启服务器
不用nodemon的话,就用node server/server.js 启动服务器
{
"name": "react-todo-list",
"version": "1.0.0",
"description": "A simple todo list app built with React, Redux and Webpack",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "nodemon server/server.js --ignore components"
},
"repository": {
"type": "git",
"url": "https://github.com/kweiberth/react-todo-list.git"
},
"author": "Kurt Weiberth",
"license": "ISC",
"dependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.0",
"express": "^4.13.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.6",
"redux": "^3.3.1",
"redux-logger": "^2.5.0",
"redux-thunk": "^1.0.3",
"webpack": "^1.12.13",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.6.4"
}
}
webpack.config.js
var webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
output: {
path: require("path").resolve("./dist"),
filename: 'bundle.js',
publicPath: '/'
},
//output: {
// path: path.resolve(debug ? '__build' : './assets/'),
// filename: debug ? '[name].js' : 'js/[chunkhash:8].[name].min.js',
// chunkFilename: debug ? '[chunkhash:8].chunk.js' : 'js/[chunkhash:8].chunk.min.js',
// publicPath: debug ? '/__build/' : ''
//}
//http://www.open-open.com/lib/view/open1440685541810.html
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre']
}
}
]
}
}
server/server.js:
在此处是用的node做后台,并且配置了webpack.config.js的信息,不然,在跑服务器前,要先输入webpack –config webpack.config.js 命令来生成bundle.js文件。
并且也用到了热加载,webpack-dev-middleware webpack-hot-middleware 在代码改变后,立马更新html页面
var express = require('express');
var path = require('path');
var config = require('../webpack.config.js');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var app = express();
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath}));
app.use(webpackHotMiddleware(compiler));
app.use(express.static('./dist'));
app.use('/', function (req, res) {
res.sendFile(path.resolve('client/index.html'));
});
var port = 3000;
app.listen(port, function(error) {
if (error) throw error;
console.log("Express server listening on port", port);
});