React学习笔记，webpack环境搭建

开发环境

Windows 10,node v8.9.4,npm 5.6.0,WebStorm 2017.3.2

创建项目

• 创建项目文件夹myreact
• 控制台打开项目文件夹，生成package.json。生成命令：

npm init -y

• 安装react依赖包，还是在项目文件夹下。安装命令：

npm install --save react react-dom

• 安装webpack，babel依赖包。安装命令：

npm install --save-dev webpack webpack-dev-server webpack-merge babel-cli babel-preset-env babel-preset-react babel-preset-react-hmre babel-loader

npm安装命令--save与--save-dev的区别，点这里。

package.json的内容

{
  "name": "myreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.1",
    "webpack-merge": "^4.1.1"
  }
}

• 搭建目录结构

myreact
  --app    主目录
    --component    react组件目录
      --index    首页目录
    --public    公共目录 主要放 js css img
      --js    公共js文件
  --build    webpack 打包输出目录
  --config    打包配置目录
    --webpack    webpack配置目录
  --entryBuild    webpack 打包入口文件目录

目录结构