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); });原文链接:/react/305388.html