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文件夹都是项目开发的模块，比如登录模块，主模块

 

转载于:https://www.cnblogs.com/tianyuexian/p/8191835.html