react+webpack+redux 基础配置

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);
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!