React+Webpack+Router搭建React基础工程

最新推荐文章于 2021-05-21 19:06:50 发布

SB的二狗

最新推荐文章于 2021-05-21 19:06:50 发布

阅读量736

点赞数

分类专栏： react 文章标签： react webpack router

本文链接：https://blog.csdn.net/pkpk20044/article/details/60579508

版权

本文主要介绍React+Webpack+Router搭建React基础工程的简单方式。

React 起源于 Facebook 的内部项目，因为该公司对市场上所有的前端MVC框架都不满意，就决定自己写一套，用来构建Instagram。

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

特点：

1.声明式设计：React采用声明范式，可以轻松描述应用。

2.React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活：React可以与已知的库或框架很好地配合。

如果你想对本文中的React、webpack、router有更加深入的了解，请访问以下网站进行深入的学习：

1.React官方中文文档：http://reactjs.cn/react/docs/getting-started-zh-CN.html（大多数文章后缀名加入zh-CN会变为中文）

2.webpack中文指南：http://webpackdoc.com/loader.html

3.react-router中文文档：http://www.uprogrammer.cn/react-router-cn/

好了，废话不多说，下面介绍运用React+Webpack+Router搭建React基础工程，目录结构如图所示：(bundle.js和server.bundle.js为构建生成的文件)

package.json文件配置:

{
  "name": "webpack-react",
  "version": "1.0.0",
  "description": "",
  "main": "./justice/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline --content-base build --history-api-fallback",
    "start:prod": "npm run build && node server.bundle.js",
    "build:client": "webpack",
    "build:server": "webpack --config webpack.server.config.js",
    "build": "npm run build:client && npm run build:server",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build --history-api-fallback"
  },
  "keywords": [
    "webpack"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.16.0",
    "body-parser": "^1.4.3",
    "css-loader": "^0.21.0",
    "express": "^4.4.5",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "jquery": "^3.1",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "redux-devtools": "^3.3.1",
    "style-loader": "