react创建webpack服务器

react

在创建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 的写法


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


但是不知为何,依旧报错


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


衷心谨言:

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



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

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

以上是 react创建webpack服务器 的全部内容, 来源链接: utcz.com/z/384004.html

回到顶部