react创建webpack服务器

在创建webpack服务器之前首先要能够  npm start  启动成功，但是由于我之前的错误操作，导致它一直启动不起来

原因：是启动的位置被我切换错了，你启动npm的时候，必须在 package.json的文件下，此时会启动成功

1.创建webpack服务器（注意：webpack的服务器是基于nodejs）

 1.webpack服务器全局安装

命令：npm install -g webpack-dev-server

2.安装项目依赖

命令：npm install webpack-dev-server --save-dev

3.webpack的服务器默认端口是8080，可以通过port进行修改

4.运行webpack服务器

启动：webpack-dev-server

5.配置服务器

注意：以下配置是在package.json文件中书写

"scripts": {
      "start": "webpack",
      "build": "webpack-dev-server"
    }

运行：npm run build

此处忘记了截图，不过还就是在webpack文件下运行，如果前面步骤都没有出错的话，应该会顺利执行的

6.配置热更新

命令：webpack-dev-server --content-base build --inline --hot

7.将热更新命令加入到配置中

"scripts": {
      "start": "webpack",
      "build": "webpack-dev-server --content-base build --inline --hot"
  }

（此处恍然大悟，我的json配置文件中似乎是 --inline 后面的--hot没有写，待会加上，看看有没有成功（菜鸟们要注意了，学习的时候千万不要丢三落四的））

运行 ：npm run build

8.服务器参数：

content-base:默认路径的文件

port:端口，默认8080

color:在控制台可以看到不一样颜色的内容

inline hot :主动刷新页面

1.Loaders：
    loader是webpack可以通过配置脚本，或者外部依赖来执行一些功能
      1.配置loader需要在webpack.config.js文件下:
        1.test:一个匹配loader要做操作的文件的一个正则表达式（必须）
        2.loader：loader要执行的任务的名字（必须）
        3.query:为loader提供一些外部选项配置
      2.json格式的数据转化成js的对象
          1.安装一个json的loader：
            1.命令：npm install --save-dev json-loader

            2.配置：需要在webpack.config.js文件中loader的配置
            3.创建一个json格式的数据文件

（以下配置是在webpack.config.js文件中执行）
              module:{
               loaders:[
                 //配置json格式的转换
                  {
                   test:/\.json$/,
                    loader:"json-loader"
                  }
                ]
              }

      3.创建json文件
    4.执行

2.babel

1.提供给我用来对es6进行编译成es5，jsx语法她也可以进行编译

2.babel安装

1.安装依赖包

命令：npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react  (一次性安装所有的)

3.搭建react环境

安装：npm install --save-dev react  react-dom

4.修改hello.js 文件和app.js文件

  hello.js：
        import React from "react";
        export default class Hello extends React.Component{
          render(){
            return(
              <div>我是Hello文件的信息</div>
            )
          }
        }
      app.js:
        import React from "react";
        import ReactDOM from "react-dom";
        import Hello from "./hello.js";
        class App extends React.Component{
          render(){
            return(
              <div>
                <Hello />
              </div>
            )
          }
        }

  ReactDOM.render(<App/>,document.getElementById("root"));

以上需要注意的：

1.es6的语法

2.react es6 的写法

这是昨天一天的学习内容，但我发现最后启动服务的时候会报错，一下是由于自己粗心，把中文逗号加了上去，于是我就改了一下

但是不知为何，依旧报错

由于本人昨天心情太好，就没有继续搞，但是刚刚在做笔记的时候，我发现好像是前面的一小步走错了导致的，今天就继续学习学习

衷心谨言：

学习一个东西的时候不要轻言放弃，因为当你成功的实现每个功能的时候，那种心情真的是很美丽，而且也不要怕错，错了我们就学习着怎样解决它，因为错可以让你成长，可以让你懂得更多的东西。  

 

学习是一种快乐的体验，不要轻言放弃哦！

--给今天的自己一个美丽的警告