webpack＋react 从零构建简单架构

第一步：安装node服务器

　　webpack的操做都是基于node服务器来执行，因此要安装一个全局的node服务器，安装方法参考官网，也能够先安装nvm(node服务器的版本管理工具)。我我的环境安装了nvm 因此在这说一下nvm运行node的方法，安装好nvm和node以后，cd来到本身的项目（我创建的项目名是react-test）运行nvm ls会把你全部的node版本列举粗来，想用用哪一个版本运行nvm use 版本号（例：nvm use v7.6.0）此刻能够用node服务器作开发了。

第二步：安装package.json

     以后的操做都须要在你的项目目录下运行，npm是一个基于Node的包管理工具，项目会依赖不少大大小小的npm包，因此须要有package.json这样一个文件来记录依赖的包和包版本号，也会存放自定义的脚本任务稍后会提到。在当前目录下运行npm init创建package.json，创建的时候会询问你package的名称、版本和描述等，直接按回车就能够，最后输入yes在你的项目根目录下生成一个package.json的文件，若是嫌问题不少麻烦直接运行npm init --yes便可生成。

第三步：初步配置webpack和react

     首先安装webpack和react 当前目录下运行npm install --save-dev webpack，npm install --save-dev react react-dom react-router运行成功后会在根目录下生成一个node_modules文件夹，这个文件夹是将来放置npm安装的全部的包。package中也会记录下（这样有个好处就是当你在移植你的项目的时候，拷贝node_modules文件夹会很费时间，不用拷贝，有package.json的前提下运行npm install就能够把全部的依赖包从新下载下来）。　　

     如今把主要的依赖的包安装好了，先创建项目目录架构以下

react-test
  src
    index.html
    router
      app.js
　　　 login
　　　　 login.js
　　     login.less
      main
        main.js
        main.less

  node_modules
  package.json

index.html是入口页面，整个开发就一个html文件，用来引入打包后的js文件等。

app.js是入口文件。

login和main文件夹都是项目开发的模块，好比登陆模块，主模块