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


Posted in Javascript onJune 01, 2017

最近由于项目需要,所以尝试使用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,配置成功。

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

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

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,运行成功!

现在我们的文件目录为:

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

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

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

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

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

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

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

Javascript 相关文章推荐
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 #Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 #Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 #Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 #Javascript
详解vue过滤器在v2.0版本用法
Jun 01 #Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 #Javascript
You might like
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python daemon守护进程实现
2016/08/27 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
杭州时比特电子有限公司SQL
2013/08/22 面试题
物理专业本科生自荐信
2014/01/30 职场文书
大学军训感言1500字
2014/03/09 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
卫生标语大全
2014/06/21 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
音乐教师求职信范文
2015/03/20 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书