详解基于webpack搭建react运行环境

最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己。

首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行。

1.初始化文件夹

npm init //初始化一个package.json文件
git init  //产生.git文件,便于之后版本提交回退

2.搭建webpack环境

npm install webpack --save-dev //安装webpack依赖

--save建议使用,这样当别人clone你的代码时,只需要npm install就可以安装好所有需要的依赖,并且你也可以在你的package.json文件夹中看到你使用的哪些依赖。

现在我们可以测试下webpack有没有安装成功,在文件夹根目录下创建三个文件,分别是entry.jsbundle.jsindex.html,文件内容分别如下。

//entry.js
document.write('Hello World');
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

bundle.js内容为空

执行命令行:webpack ./entry.js bundle.js

之后会发现bundle.js文件下有好多代码出现,这就是经过webpack打包后的文件。在浏览器打开index.html,页面会出现Hello World,webpack安装成功!

3.配置webpack

创建webpack.config.js文件,进行如下基本配置

module.exports = {
  entry: "./entry.js", // 要打包的入口文件
  output: {        //打包后的文件
    path: __dirname,  //表示使用绝对路径
    filename: "bundle.js" //输出文件名
  },
  module: {
    loaders: [      //用于加载一些静态文件夹(css样式,图片之类)
     { test: /\.css$/, loader: "style!css" },
     {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/, //不进行转换的文件,可以提高打包速度
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

执行命令:webpack

打开index.html出现Hello World,配置成功。

现在我们的文件目录如下:

4.express下运行

npm install express --save-dev

创建server.js

var express = require('express');
var app = express();

app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
执行命令:
webpack // 用于打包文件
node server.js // 开启服务器

浏览器访问 http://localhost:3000/ , 页面显示Hello World,运行成功!

5.配置 React, ES6 & Babel 6

npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev // 转换JSX
npm install babel-core --save-dev // babel的核心包
npm install babel-preset-es2015-dev // es2015的babel预设
npm install babel-preset-react-dev // react的babel预设

创建文件.babelrc

 {
  "presets": [
   "es2015",
   "react"
  ]
 }

接下来就是写react小例子测试啦,在entry.js写入:

import React, {Component} from 'react';
import {render} from "react-dom";

class HelloMessage extends React.Component {

  render() {
    return <div>Hello World</div>;
  }
}
render(<HelloMessage />, document.getElementById('app'));

为了将组件渲染到页面,我们需要在index.html中添加一个相当于容器的div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div> // 添加的div,渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

浏览器访问 http://localhost:3000/ , 页面显示Hello World,运行成功!

现在我们的文件目录为:

至此我们就搭建好了一个简单的环境啦~

框架Github地址:https://github.com/DQing/webpack-helloworld-demo.git

大家在搭建框架时不要忘了小步提交。

还可以进行一些额外的配置,步骤其实都差不多

框架Github地址:https://github.com/DQing/jishiben.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • React Native 环境搭建的教程

    一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-

  • React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • React入门教程之Hello World以及环境搭建详解

    前言 React 是一个用于构建用户界面的 JavaScript 库.react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践. 不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React. 入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我

  • 快速搭建React的环境步骤详解

    前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道. 本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考. 有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么. 1.Nodejs & NPM 为什么要提nodejs呢? 与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态.nodejs平台上衍生出了强大的npm.grunt.express等,几乎重新定义了前端的工作

  • React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

  • 详解基于webpack搭建react运行环境

    最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack

  • 详解使用WebPack搭建React开发环境

    第一步.基础环境 初始化 项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架 入口文件(src/index.js) import React from 'react' import {render} from 'react-dom' import App from './App' render(<App/>,document.getElementById('root')) 主组件(s

  • 使用webpack搭建react开发环境的方法

    1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新

  • 详解基于docker搭建lanproxy内网穿透服务

    文档更新说明 2018年04月06日 v1.0 内网穿透相信是后端开发者经常遇到的需求,可是怎么实现呢?其实有现成的服务:花生壳.ngrok等,但是,最近花生壳宣布,免费版的内网穿透将不支持80端口映射了,而免费版的ngrok也不够稳定,于是乎,我就开始需找新的解决方案了 本文使用了docker.nginx,要全部搞懂的话需要一定的后端基础(当然,基本上入个门就可以了),个人认为还是有一定阅读门槛的,但是你如果只是想把服务搭建起来,按照步骤来做是不难的 1.概述 内网穿透其实就是用服务器做一个中

  • 详解Docker下搭建Jenkins构建环境

    首先需要搭建好docker环境的linux系统,这个教程多如牛毛,在此不再赘述. 然后编写一个dockerfile来生成一个镜像,dockerfile其实就是一系列命令的集合,有点像windows的批处理文件, 搭建Jenkins构建环境需要安装jdk.maven.tomcat.jenkins,另外还安装了GIT,用来构建GIT来源的代码,内容如下: FROM centos:7 # author info MAINTAINER xulijian 514045152@qq.com # instal

  • 详解基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理--不忍直视 2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的-- 3.数据的渲染使用模板引擎,

  • 详解基于centos7搭建Nginx网站服务器(包含虚拟web主机的配置)

    一 .Nginx服务基础 Nginx (engine x)专为性能优化而开发,其特点是占有内存少,它的稳定性和低系统资源消耗,以及对并发连接的高处理能力,(单台物理服务器可支持5000个并发请求).事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度.京东.新浪.网易.腾讯.淘宝等.同时也提供了IMAP/POP3/SMTP服务. Nginx的优点: *** 可以高并发连接** 官方测试Nginx能够支撑5万并发连接,实际生产环境中可以支撑2~4万并

  • 详解基于Harbor搭建Docker私有镜像仓库

    什么是 Harbor? 第一次使用这个的时候是刚进公司处理的第一个任务的时候,发现 Harbor 就是一个用于存储和分发 Docker 镜像的企业级Registry 服务器. 网上找到一个 Harbor 的架构图: Harbor 是 VMware 公司开源的企业级 DockerRegistry 项目,项目地址为 https://github.com/vmware/harbor.其目标是帮助用户迅速搭建一个企业级的 Docker registry 服务.它以 Docker 公司开源的 regist

  • 详解基于docker-swarm搭建持续集成集群服务

    前言 本文只为自己搭建过程中的一些简单的记录.如果实践中有疑问,可以一起探讨. 为了能在本机(macOS)模拟集群环境,使用了vb和docker-machine.整体持续集成的几个机器设施如下: 1.服务节点:三个manager节点,一个worker节点.manager需要占用更多的资源,manager配置尽量高一些.swarm的manager节点的容错率是 (N-1)/2 .N是manager节点数.也就是如果有3个manager,那就能容忍一个manager节点挂掉.官方的算法说明:Raft

  • 详解基于webpack&gettext的前端多语言方案

    gettext 是GNU 提供的一套 国际化与本地化 处理的相关函数库.大多数语言都有对应的gettext实现.本文主要使用jed来实现gettext 一系列方法对应的功能. pot/po文件 pot文件 是po文件的模板文件,一般是通过 xgettext 程序生成出来的. po文件 是根据pot文件通过msginit程序,设置对应的国家语言生成用于填写实际翻译内容的文件. xgettext/msginit/msgmerge xgettext 程序可以扫描指定的代码文件,取出其中gettext部

随机推荐