react基础知识

1.webpack是什么？
  1.webpack构建工具
  2.自带模块化(commonjs规范)
  3.编译：es6 -> es5 , jsx -> es5 , ts(typescript) ->  js
  4.gulp所做的事情，webpack都可以做到
  5.自带服务器，服务器也是基于Node（webpack-dev-server）
  6.那些环境经常使用到webpack：react 、 vue
  7.webpack版本：1.x 、2.x 、3.x 、4.x版本

2.安装webpack3.x
  1.安装全局webpack
    npm install -g webpack@3.x
  2.项目初始化package.json
    npm init -y
  3.安装项目依赖的webpack
    npm install -D webpack@3.x
  4.项目根目录创建两个文件夹src和dist
    src:源码文件
    dist：编译之后的文件
  5.编写代码
    app.js:document.write("hello webpackc");
  6.执行webpack
    webpack 路径/入口文件  路径/出口文件
    webpack src/app.js    dist/bundle.js
  7.编写代码
    新创建一个js文件hello.js 并导出 在主入口文件app.js文件中引入：
    module.exports = function(){
      var hello = document.createElement("div");
      hello.textContent = "hello Webpack3.x";
      return hello;
    }
3.生成webpack.config.js文件
  配置入口和出口 配置好之后直接执行webpack.config.js文件就可以，不用再执行第六步，简单一些

  .dirname表示当前路径
  module.exports = {
    entry:__dirname +"/src/app.js",
    output:{
      path:__dirname + "/dist",
      filename:"bundle.js"
    }
  }
4.webpack执行的快捷方案
  在package.json文件中代替webpack的执行

更改package.json：
  "scripts": {
    "build":"webpack"
  }
  执行：npm run build   就相当于执行了webpack
5.调试
  生成错误信息文件
    配置webpack.config.js文件
    添加devtool:"eval-source-map"
        devtool:
          eval
          source-map
          hidden-source-map
          inline-source-map
          eval-source-map
          cheap-source-map
          cheap-module-source-map

6.服务器
  1.全局安装服务器
    npm install -g webpack-dev-server@2.x
  2.安装项目依赖
    npm install -D webpack-dev-server@2.x
  3.运行webpack服务器
    webpack-dev-server
  4.配置服务器的快捷执行方案

 更改package.json：
    "scripts": {
      "build": "webpack",
      "dev":"webpack-dev-server"
    }
    执行：npm run dev 就相当于执行了webpack-dev-server
  5.修改服务器根路径
    "dev":"webpack-dev-server --content-base dist"
  6.热更新
    "dev":"webpack-dev-server --content-base dist --inline --hot"
  7.服务器配置
      --content-base：指定服务器运行根目录
      --inline：在线更新
      --port: 修改端口

7.module
  loaders(use)
  loader是webpack可以通过配置脚本，或者外部依赖来执行一些功能
  例如：es6 -> es5  jsx -> js  less -> css
  1.配置loaders
      1.test：一个匹配loader要做操作的文件的一个正则表达式（必须）
      2.loader(use)：loader要执行的任务的名字（必须）
      3.options:为loader提供一些外部选项配置(可选项)
  2.json格式的数据转化成js的对象
    注意：当前的json-loader只是为了测试，我们当前安装的webpack的版本3.x
               事实上，在当前版本中，已经集成了json-loader,不需要单独安装了
    1.安装json-loader
      npm install -D json-loader
    2.编写配置文件代码
      {
        test:/\.json$/,
        use:"json-loader"
      }

8.es6 -> es5
    1.安装依赖
      npm install -D babel-core babel-loader babel-preset-es2015
    2.配置webpack.config.js文件
      {
        test:/\.js$/,
        use:"babel-loader",
        options:{
            presets:["es2015"]
        }
      }
9.构建react环境(webpack+ES6+React)
  1.安装react
    npm install --save react react-dom
    npm install --save-dev babel-preset-react
  2.编写配置文件
    {
      test:/\.(js|jsx)$/,
      use:"babel-loader"
    }
    增加.babelrc文件

    .babelrc的配置：{
                                            "presets": ["react", "es2015"],
                                             "env": {
                                                "dev": {
                                                   "plugins": [["react-transform", {
                                                         "transforms": [{
                                                             "transform": "react-transform-hmr",
                                                             "imports": ["react"],
                                                             "locals": ["module"]
                                                            }]
                                                         }]]
                                                       }
                                                   }
                                   }

  3.编写代码
    import React from "react"
    import ReactDOM from "react-dom"
    class App extends React.Component{
      render(){
        return(
          <div>React EVN</div>
        )
      }
    }
    ReactDOM.render(<App />,document.getElementById("root"))
10.CSS处理
  1.安装css相关依赖
    npm install -D css-loader style-loader
  2.添加配置
    {
      test:/\.css$/,
      use:[
        "style-loader",
        "css-loader"
      ]
    }

11.图片配置
  1.安装依赖：
    npm install -D file-loader url-loader
  2.添加配置
    {
      test:/\.(png|jpg|gif|jpeg|svg)$/,
      use:"url-loader?limit=2048" // 大于2M进行压缩
    }

12.Less和Sass
  1.安装
    npm install --save-dev less less-loader
  2.添加配置
    {
      test:/\.less$/,
      use:[
        "style-loader",
        "css-loader",
        "less-loader"
      ]
    }

13.插件(plugins)
  1.打开浏览器
    安装：
      npm install -D open-browser-webpack-plugin
    配置：

         1、在配置文件webpack.config.js中先引入插件：var browser = require('open-browser-webpack-plugin');

          2、设置plugins（与module同级）

              plugins:[
                   new browser({
                        url:'http://localhost:8080'
                    })
               ]
  2.HTML模板
    安装：
      npm install -D html-webpack-plugin
    配置：

          1、在配置文件webpack.config.js中先引入插件：var htmlWebpack = require('html-webpack-plugin');

          2、设置plugins（与module同级）

              plugins:[
                   new browser({
                        url:'http://localhost:8080'
                    }),

                    new htmlWebpack({
                        template:__dirname + '/src/index.temp.html'
                    })
               ]

  3.内置插件（省略后缀名）
    resolve:{
       extensions:['.js','.jsx']
    }
14.生产环境的搭建
  安装
    npm install -D cross-env
    npm install -D babel-plugin-react-transform
    npm install -D react-transform-hmr
    npm install -D babel-preset-stage-2