react+webpack+redux 基礎配置

lijy91 發(fā)布于2019-08-22 10:44 / 507人閱讀

摘要：此處用到跑服務器命令行輸入即可，會忽略的改變，其余時候都會自動重啟服務器不用的話，就用啟動服務器在此處是用的做后臺，并且配置了的信息，不然，在跑服務器前，要先輸入命令來生成文件。并且也用到了熱加載，在代碼改變后，立馬更新頁面

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配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91172.html

webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態(tài)，在公司決定研發(fā)bss管理系統(tǒng)時選用react開發(fā)，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發(fā)的主要原因是weex生態(tài)還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0
React項目實戰(zhàn)：環(huán)境搭建

摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。前言前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議：如果對Weex App感興趣，應該選擇vue框架；如果...

cnio 2019-08-21 17:47 評論0 收藏0
React項目實戰(zhàn)：環(huán)境搭建

摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。前言前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議：如果對Weex App感興趣，應該選擇vue框架；如果...

GHOST_349178 2019-08-01 18:04 評論0 收藏0
webpack4 中的最新 React全家桶實戰(zhàn)使用配置指南！

摘要：安裝配置加載器配置配置文件配置支持自定義的預設或插件只有配置了這兩個才能讓生效，單獨的安裝是無意義的。 showImg(https://segmentfault.com/img/bVbjGNY?w=2847&h=1931); 想閱讀更多優(yōu)質文章請猛戳GitHub博客,一年百來篇優(yōu)質文章等著你！最新React全家桶實戰(zhàn)使用配置指南這篇文檔是呂小明老師結合以往的項目經驗加上自己本身...

Towers 2019-08-26 12:24 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

摘要：我們可以為元素添加屬性然后在回調函數中接受該元素在樹中的句柄，該值會作為回調函數的第一個參數返回。使用最常見的用法就是傳入一個對象。單向數據流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。面試中問框架，經常會問到一些原理性的東西，明明一直在用，也知道怎么用，但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

darcrand 2019-08-23 13:41 評論0 收藏0