react+webpack+redux 基础配置

前端之家收集整理的这篇文章主要介绍了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);
});
原文链接:/react/305388.html

猜你在找的React相关文章