国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react+webpack+redux 基礎(chǔ)配置

lijy91 / 500人閱讀

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

package.json:

此處用到nodemon跑服務(wù)器：命令行輸入：npm run serve即可，會(huì)忽略components的改變，其余時(shí)候都會(huì)自動(dòng)重啟服務(wù)器
不用nodemon的話，就用node server/server.js 啟動(dòng)服務(wù)器

{
  "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做后臺(tái)，并且配置了webpack.config.js的信息，不然，在跑服務(wù)器前，要先輸入webpack --config webpack.config.js 命令來生成bundle.js文件。
并且也用到了熱加載，webpack-dev-middleware webpack-hot-middleware 在代碼改變后，立馬更新html頁(yè)面

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91172.html

相關(guān)文章

  • webpack工程化集成React技術(shù)棧（一）

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

    tianhang 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

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

    cnio 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

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

    GHOST_349178 評(píng)論0 收藏0

  • webpack4 中的最新 React全家桶實(shí)戰(zhàn)使用配置指南！

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

    Towers 評(píng)論0 收藏0

  • React專題：react，redux以及react-redux常見一些面試題

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

    darcrand 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<