react+webpack+redux 基础配置

lijy91 发布于2019-08-22 10:44 / 483人阅读

摘要：此处用到跑服务器命令行输入即可，会忽略的改变，其余时候都会自动重启服务器不用的话，就用启动服务器在此处是用的做后台，并且配置了的信息，不然，在跑服务器前，要先输入命令来生成文件。并且也用到了热加载，在代码改变后，立马更新页面

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

GPU云服务器云服务器 react-redux React_Redux_Appointm react-router-redux webpack cdn配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91172.html

webpack工程化集成React技术栈（一）

项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...

tianhang 2019-08-22 14:47 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

cnio 2019-08-21 17:47 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

GHOST_349178 2019-08-01 18:04 评论0 收藏0
webpack4 中的最新 React全家桶实战使用配置指南！

摘要：安装配置加载器配置配置文件配置支持自定义的预设或插件只有配置了这两个才能让生效，单独的安装是无意义的。 showImg(https://segmentfault.com/img/bVbjGNY?w=2847&h=1931); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！最新React全家桶实战使用配置指南这篇文档是吕小明老师结合以往的项目经验加上自己本身...

Towers 2019-08-26 12:24 评论0 收藏0
React专题：react，redux以及react-redux常见一些面试题

摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用，但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...

darcrand 2019-08-23 13:41 评论0 收藏0